基于Vue.js的消息⽓泡插件
之前了⼀款基于vue的⽂本折⾏显⽰组件，今天介绍⼀款仿照QQ消息⽓泡的插件，演⽰地址。
仿照QQ消息⽓泡想法的起源是来⾃掘⾦的安卓⼩伙伴们，看到他们在安卓平台实现了这种效果，所以想迁移到web上。在这⾥要感谢他们。
vuejs流程图插件
先放张图看⼀下效果：
实现原理
使⽤SVG绘制贝塞尔曲线以及圆形⽓泡。
关键点的坐标计算借鉴这位⼩伙伴的思路，⾮常感谢他。
⽓泡抖动是在⿏标抬起（mouseup）（移动设备上⽤的ontouchend，ontouchcanel）事件触发时，使⽤定时器更新元素坐标。如何使⽤
这个插件使⽤起来也是相当简单了：
1. 安装
npm install vue-bubble复制代码
2. 引⼊
const vueBubble from 'vue-bubble'
Vue.use(vueBubble)复制代码
3. 使⽤
v-bubble指令对应的是⼀个对象。该对象有如下可选值：
value
必选，消息⽓泡显⽰的内容，value为0的时候，⽓泡默认是不显⽰的。
show
可选，是否显⽰消息⽓泡，true为显⽰，false为隐藏。需要注意的是，该属性优先级⼤于value
⽐如，value=0，show为true，这种情况show起作⽤，value忽略，所以⽓泡显⽰。
afterHide
可选，回调函数，⽓泡拖拽消失之后执⾏的回调，⼀般⽤于重置value。afterHide如果想带参数的话，可以使⽤下⾯的⽅式来配置，利⽤Function.prototype.bind函数把要携带的参数传递过去。
下⾯代码是github仓库中的demo代码⽚段。
<i v-bubble="{show:item.show,afterHide: (hide.bind(this,item)),value : unt}" class="msg"></i>复制代码
结语
这个插件实现起来⽐较简单，只是细节有些多，仔细酝酿了⼀下，也没酝酿出什么内容。对于我们程序员来说，还是直接上代码来的实在，(^__^) 嘻嘻……再次奉上vue-bubble的，喜欢它的⼩伙伴可以给个⼩⼩的star哈~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。