基于 Vue.js 的消息气泡插件

以前介绍了一款基于vue的文本折行显示组件ellipisis-plus，今天介绍一款仿照QQ消息气泡的插件vue-bubble，演示地址在这里。

仿照QQ消息气泡想法的起源是来自掘金的安卓小伙伴们，看到他们在安卓平台实现了这种效果，因此想迁移到web上。在这里要感谢他们。

先放张图看一下效果：

实现原理

• 使用SVG绘制贝塞尔曲线以及圆形气泡。
• 关键点的坐标计算借鉴这位小伙伴的思路高仿QQ未读消息气泡拖拽黏连效果，很是感谢他。
• 气泡抖动是在鼠标抬起（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 : item.count}" class="msg"></i>复制代码

结语

这个插件实现起来比较简单，只是细节有些多，仔细酝酿了一下，也没酝酿出什么内容。对于咱们程序员来讲，仍是直接上代码来的实在，(^__^) 嘻嘻……再次奉上vue-bubble的github地址，喜欢它的小伙伴能够给个小小的star哈~