阅读 3583

基于 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哈~

关注下面的标签,发现更多相似文章
评论