本篇文章置顶
vue自定义全局登录插件
vue自定义全局登录插件, 在全局任意位置使用this.$login()即可调起登录弹窗
分为两个文件:
Login.vue(登录样式主体)
index.js(插件方法及注册到全局)
使用方法
以下具体代码:
vue自定义loading指令
vue自定义loading指令,在元素上使用你v-loading可显示数据加载时动画,数据加载后消失
分为三个文件:
loading.vue(loading样式主体)
loading.js(自定义指令相关方法)
index.js(指令注册到全局)
使用方法
以下具体代码:
h5移动端audio消息声音依次提醒
实现效果:聊天时,消息连续到来,声音依次播放。有多少消息,播放多少次。
这种播放效果并不理想,只是在程序中提示音次数是对的,但由于播放一次到下次播放会有一个时间差,
因为浏览器一次只能播放一个音频,从音频播放到不播放之间有一个杂音区间,因此这种播放效果并不利落
思路:统计需要播放的次数,如果当前音频没有处于播放状态,则播放音频,播放次数减一,
否则等音频播放完成后,再进行下一次播放,直到要播放的次数放完
以下具体代码:
h5移动端audio消息声音提醒ios适配
实现效果:聊天中,有消息进入时声音提醒,主要运用audio标签。
注意:
①audio 标签src须静态值,若设置动态值,须audio对象 调用load()方法
②声音文件请用MP3格式,wav格式不兼容ios
③元素加载后,使用touchstart(h5)或 click(pc)事件初始化一次声音文件(play(), pause()), 初始化后,后续可主动触发声音播放
④初始化事件中,pause()后须设置currentTime为音频最大时间数(我这里是1s)
⑤每次触发播放前须设置currentTime为0(ios使用fastSeek()方法设置,设置后须load())
⑥播放完成后须设置currentTime为音频最大时间数(我这里是1s), 可通过监听audio对象的onended事件设置
以下具体代码:
JS原生拖拽 + 点击事件
原生JS拖拽运用onmousedown,onmousemove,onmouseup等事件来实现拖拽,难点在于在拖拽时会同时触发点击事件。
思路:
定义一个变量var isDrag
在onmousedown时isDrag = false
在onmousemove时isDrag = true, 同时需要判断鼠标点击偏移量小时,isDrag = false
在click事件时根据isDrag来判断是否允许点击事件
以下具体代码:
Ueditor + vue-ueditor-wrap 多语言切换及自定义上传图片按钮
问题场景:
Ueditor在vue项目中的使用, 需要多语言切换显示对应语言提示, 上传图片功能需要自定义.
第一步: 修改Ueditor源码 并打包成生产文件
第二步: 使用vue-ueditor-wrap引入Ueditor
第三步: 在vue组件中编写自定义上传图片按钮