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