vue2
vue2
不靠谱的作曲家
这个作者很懒,什么都没留下…
展开
-
vue中如何使用websocket
为什么要有心跳机制呢?就是为了确保连接的稳定性,说白了就是客户端通过心跳的形式告诉服务端“我”还活着,连接请不要断开。实时统计各人员打分情况,并可以控制计时器的开始、暂停、结束。如果websocket断开将进行重新连接。原创 2023-07-06 17:59:38 · 1567 阅读 · 1 评论 -
vue中对语句的语义进行比较
vue中对语句的语义进行比较。原创 2023-06-27 16:33:30 · 247 阅读 · 0 评论 -
vue标签单选、多选效果
选中当前标签获取id追加到数组,可选中多个,但如果选择全部则清除其它已选择的标签。选中当前标签获取id追加到数组,只可选中其中一项。原创 2023-05-23 10:43:01 · 613 阅读 · 0 评论 -
Hbuilder打包App隐藏系统状态栏
场景:vue制作的混合app打包在安卓平板运行初始化plus对象created() { document.addEventListener('plusready', this.plusReady, false) },methods: { plusReady () { var main = plus.android.runtimeMainActivity(); varwindowMe = main.getWindow(); plus.androi原创 2022-01-12 18:24:47 · 1364 阅读 · 2 评论 -
数组转对象
原始数据期望数据const groupBy = (arr, func) => this.scoreList.map(typeof func === "function" ? func : (val) => val[func]).reduce((acc, val, i) => { acc[val] = arr[i]; return acc; }, {});let fromData = groupBy(this.scoreList,item => item.原创 2022-01-05 15:14:42 · 561 阅读 · 0 评论 -
vue中使用pdf预览插件pdfh5
pdfh5官方npmpdfh5博客主页原创 2021-06-16 14:25:06 · 406 阅读 · 1 评论 -
vue中引用电子签名
1.下载电子签名插件cnpm install signature_pad2.配置画笔属性data(){ return{ SignaturePad:null, config: { backgroundColor: "rgba(255,255,255,0)", penColor: "#000", //笔刷颜色 minWidth: 1, //最小宽度 maxWidth: 8, }, }}3.html结构<div class="signatur原创 2021-06-02 16:54:28 · 395 阅读 · 9 评论 -
vue 随机抽签
1.新建一个数组roomArr: ["1", "2", "3", "4","5", "6", "7", "8","9", "10", "11", "12","13", "14", "15"],number:'',2.点击抽签,获取随机数,为了有随机的效果,使用了一个定时器this.timer = setInterval(() => { this.number = this.roomArr[Math.floor(Math.random() * this.roomArr.length)];}原创 2021-05-26 14:29:19 · 1590 阅读 · 11 评论 -
vue关于时间戳转化为日期格式
1.拿到返回值是一段时间戳2.把时间戳转化为日期格式,如:2021-04-05 08:00:00filters: { formatDate: (value) => { let date = new Date(value * 1000); let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? ('0' + MM) : MM; let d = date.getDate(); d原创 2021-05-25 15:15:35 · 874 阅读 · 8 评论 -
vant vue单张图片上传
上传组件 <template #input> <van-uploader accept="file" :max-count="1" v-model="photo" :after-read="afterPhoto" /> </template>datadata() { return { photo: [], }},事件绑定,组装成file文件 afterPhoto(file) { const tempFile = file.file原创 2020-11-19 10:58:17 · 811 阅读 · 0 评论 -
关于mint-ui的messageBox
项目中用到mint-ui框架,是直接引用的cdn,用到messagesBox 的 “打开prompt”,官方中这样写:MessageBox.prompt('请输入姓名').then(({ value, action }) => { ...});按照这种方式引入报错应该用下方这种形式this.$messagebox({ $type:'prompt', title:'请输入秘钥', message:'信息提示', inputPlaceholder:'请输入秘钥', showCa原创 2020-05-12 10:39:04 · 443 阅读 · 0 评论 -
antV使用教程入门
在移动端使用antV F2图表入门介绍1.通过npm安装npm install @antv/f2 --save成功安装完成之后,即可使用 import 或 require 进行引用。const F2 = require('@antv/f2');2.通过引用在线js<script src="https://gw.alipayobjects.com/os/antv/assets/...原创 2020-05-07 17:33:52 · 8584 阅读 · 0 评论 -
vue 实时往数组里追加数据
使用Vue.set()以下来解读一下 Vue.set(this.tableDatas, this.selected, obj)1.this.tableDatas是我们声明好的数组,以下是自定义数据tableDatas: [{ id: 1, caseName: '方案一', longMinute: 10, longSecond: 0, remindMinute: 2, remind...原创 2020-02-20 10:08:46 · 9908 阅读 · 0 评论 -
vue 下拉框默认选中自定义的那一项
在自定义下拉框数据的时候想默认选中特定的一项该怎么办?1.用使用双向绑定<select @change="selectColr($event)" v-model="selectOpt" class="selectColor"> <option v-for="(item,index) in colorArr" :value="item.value">{{item.co...原创 2020-02-20 10:02:16 · 1383 阅读 · 0 评论 -
vue 中使用mock数据
如果是前后端分离模式,在项目起始,后端接口没有写好的情况下,不耽误项目的进度,我们可以使用mock.js进行开发,以下就简单说下使用方法:1.下载mock.jsnpm install -D mockjs2.在项目中新建mock.js文件3.在mock.js中引入mock.jsconst Mock = require('mockjs') // 引入mockjsconst R...原创 2019-12-30 15:49:08 · 318 阅读 · 0 评论 -
vue class的绑定
1.对象的绑定基本用法:class="{ 'active': isActive }"判断是否绑定:class="{'active':isActive==-1}"或者:class="{'active':isActive==index}"2.绑定并判断多个第一种(用逗号隔开):class="{ 'active': isActive, 'sort': isSort }"第二种(放...原创 2019-12-30 14:31:12 · 1955 阅读 · 0 评论 -
vue websocket公共信道
之前我们用到websocket是在首页中用到即时通讯 传送门:vue.js中引入websocket,后来随着项目的完善,我们在全局需要增加锁屏功能。用到的也是websocket,功能就是有操作员操作之后,我们的终端就会出现锁屏界面的一个功能,后来在main.js中进行程序的书写,websocket的具体使用方法请参考上面的链接当我们就收到websocket传来的信息只需要在数据接受中进行操作...原创 2019-12-30 09:45:56 · 222 阅读 · 1 评论 -
vue图标旋转
需求是当我们点击图标进行请求数据的时候,图标进行旋转,成功之后停止旋转,请求超时也会自动停止旋转1.HTML<div class="refresh" icon="el-icon-refresh" @click="refresh()"> <img src="../assets/img/refresh.png" :class="[isRotate?'rotate':'rotat...原创 2019-12-30 09:27:46 · 2751 阅读 · 1 评论 -
vue-pdf解决浏览位置的缓存
前面我们介绍了使用vue-pdf的方法:vue-pdf使用方法在项目中使用vue-pdf时,在更换链接时,导致PDF还是停留在原先浏览的位置,造成体验不佳,我们的结局方案是在更换链接时让滚动条滚动到顶部,1.错误代码this.$refs.topicScroll.scrollTop = 0开始的时候使用上面的代码怎么都起不了作用,后台发现pdf是canvas画的,如果开始就使用此方法导致无...原创 2019-12-27 18:24:35 · 1386 阅读 · 2 评论 -
vue tab切换
1.tab标签<ul class="tab"> <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)" v-cloak>{{item}}</li></ul>2.内容<div v-show="num == 0" class=...原创 2019-12-27 18:03:46 · 114 阅读 · 0 评论 -
vue使用vue-pdf
安装npm install --save vue-pdf2.引入import pdf from 'vue-pdf'export default { components: { pdf }}3.创建html<div> <pdf v-for="i in numPages" :key="i" :src="src" :page="...原创 2019-12-25 11:19:02 · 699 阅读 · 0 评论 -
让element-ui错误提示只出现一次
1.在使用elementUI提示的时候当用户点击按钮某项条件没满足导致出现错误提示,一直点击一直出现,用户体验不友好,可以加上以下代码if (document.getElementsByClassName('el-message').length === 0) { 这里是elementUI的提示语}...原创 2019-11-28 18:21:04 · 1216 阅读 · 0 评论 -
vue输入框禁用空格
1.输入框@keydown.native="keydown($event)"2.methodskeydown(event){ if(event.keyCode == 32){ event.returnValue = false }}原创 2019-11-26 16:47:33 · 2666 阅读 · 1 评论 -
vue-cil手写虚拟数字键盘,在移动端可随意拖动
1.html<div id="pic" @mousedown="down" @mousemove="move" v-show="keybord"> <div class="inputBtnList"> <button @click="traceNumber" v-for="(item, key) in buttons" :key="key">{{item...原创 2019-11-05 10:14:17 · 1219 阅读 · 0 评论 -
Vue实例中生命周期created和mounted的区别
1.created:是在模板渲染成HTML前调用的,此时data已经准备完毕,el仍是undefined,因为没有渲染成HTML,所以不能操作dom节点,它主要用来初始化一些数据。2.mounted:是在模板渲染成HTML之后调用的,此时data,el都已准备好,可以操作html的dom节点,可以通过id什么的来查找页面元素,也可以加载一些组件什么的即使created中的方法没有执行完,mou...原创 2019-10-23 15:36:24 · 434 阅读 · 0 评论 -
vue中使用定时器和清除定时器
3.清除定时器,离开页面销毁定时器。2.在created中使用。原创 2019-10-22 11:37:07 · 2293 阅读 · 0 评论 -
vue隐性传值通过.$ref获取元素内容
1.span标签里的内容是在接口里获取到的值,我需要拿到但是不能显示(所以display:none)设置ref<ul class="name_list"> <li v-for="(name,index) in listmsg" :key="index" ref="namemsg" @click="selectname(index)" :class="{active:curr...原创 2019-10-22 10:37:33 · 851 阅读 · 0 评论 -
在vue中使用ant-design-vue
1.安装 npm install ant-design-vue --save npm install ant-design-vue --save2.在main.js引入import Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'Vue.use(Antd)这样就可以在模板中引入ui组件...原创 2019-10-12 11:51:03 · 2561 阅读 · 0 评论 -
判断手机号正确与否
通过正则判断手机号的格式var myreg = /^1[34578]\d{9}$/;if (!myreg.test(this.data.phonenum)) { wx.showToast({ title: '手机号有误', icon: 'none' }) return false;}原创 2019-09-11 14:22:14 · 213 阅读 · 0 评论 -
vue中过滤空格
很简单我们只需要加个表单修饰符 trimv-model.trim="text"原创 2019-09-03 18:09:44 · 3230 阅读 · 0 评论 -
vue.js在前台可动态配置接口域名
1.这里是配置接口地址的页面页面流程是:在接口地址输入要配置的接口,点击确定把输入框里的内容做个本地存储(忽略websocket地址)2.新建一个js文件在本地存储里面取出存入的接口地址,然后export输出const globalApi = () => { let globalApi = localStorage.getItem('apiUrl') return globalA...原创 2019-09-03 17:36:40 · 1431 阅读 · 0 评论 -
vue.js中引入websocket
websocket主要分为四步1.打开数据2.接收数据3.断开连接4.连接失败data() { return { websock: null }}初始化websocketinitWebpack() { const wsuri = "这里是websocket接口地址" this.websock = new WebSocket(wsuri); //这里面的this都指向v...原创 2019-09-03 17:09:40 · 1910 阅读 · 0 评论 -
vue金额格式化保留两位小数
Vue.filter("number", function(data) { return data.toFixed(2)})在需要的地方{{integralval/100 | number}} 元原创 2019-08-27 14:22:01 · 6095 阅读 · 0 评论 -
vue中使用v-if隐藏元素时会出现闪烁问题
解决办法在div中加入v-cloak<div class="mask" v-if="modelShow" v-cloak></div>然后在css中[v-cloak] { display: none;}就OK啦原创 2019-08-27 10:19:50 · 4718 阅读 · 0 评论 -
vue中解析JWT
首先在vue中下载解析jwt的依赖包npm install jsonwebtoken在页面中引入import jwt from 'jsonwebtoken'使用流程:let jwt = require('jsonwebtoken');let str = jwt.decode(data.data) #解码(data.data代表的是解析的数据)...原创 2019-08-19 10:53:33 · 4711 阅读 · 0 评论