基於 Vue.js 的訊息氣泡外掛

lucefer發表於2017-08-07
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哈~

相關文章