Vue.JS开源:vue-bubble-基于vuejs的消息气泡插件
<p>基于vue实现的仿QQ消息气泡拖拽插件</p> <h2>效果图</h2> <p><img src="https://simg.open-open.com/show/b04b7846871f630bb03f143545bcdbef.gif"></p> <h2>安装 && install</h2> <pre> <code>npm install vue-bubble </code></pre> <h2>如何使用 && Usage</h2> <ol> <li>引入</li> </ol> <pre> <code>const vueBubble from 'vue-bubble' Vue.use(vueBubble) </code></pre> <ol start="2"> <li>使用 v-bubble指令对应的是一个对象。该对象有如下可选值:</li> </ol> <ul> <li>value</li> </ul> <blockquote> <p>必选,消息气泡显示的内容,value为0的时候,气泡默认是不显示的。</p> </blockquote> <ul> <li>show</li> </ul> <blockquote> <p>可选,是否显示消息气泡,true为显示,false为隐藏。需要注意的是,该属性优先级大于value 比如,value=0,show为true,这种情况show起作用,value忽略,所以气泡显示。</p> </blockquote> <ul> <li>afterHide</li> </ul> <blockquote> <p>可选,回调函数,气泡拖拽消失之后执行的回调,一般用于重置value。afterHide如果想带参数的话,可以使用下面的方式来配置,利用Function.prototype.bind函数把要携带的参数传递过去。</p> </blockquote> <p>下面代码是github仓库中的demo代码片段。</p> <pre> <code><i v-bubble="{show:item.show,afterHide: (hide.bind(this,item)),value : item.count}" class="msg"></i></code></pre> <p>项目主页:<a href="http://www.open-open.com/lib/view/home/1502178318138">http://www.open-open.com/lib/view/home/1502178318138</a></p> <p> </p>
本文由用户 apxv6854 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!