Vue.JS開源：vue-bubble－基于vuejs的消息氣泡插件

基于vue實現的仿QQ消息氣泡拖拽插件

效果圖

安裝 && install

npm install vue-bubble

如何使用 && Usage

1. 引入

const vueBubble from 'vue-bubble'
Vue.use(vueBubble)

2. 使用 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>

項目主頁：http://www.baiduhome.net/lib/view/home/1502178318138