Vue.JS开源:vue-bubble-基于vuejs的消息气泡插件

Vue.js   2017-08-08 15:45:18 发布
您的评价:
     
0.0
收藏     0收藏
文件夹
标签
(多个标签用逗号分隔)

基于vue实现的仿QQ消息气泡拖拽插件

效果图

安装 && install

npm install vue-bubble

如何使用 && Usage

  1. 引入
const vueBubble from 'vue-bubble'
Vue.use(vueBubble)
  1. 使用 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.open-open.com/lib/view/home/1502178318138

 

扩展阅读

前端 MVVM 开发框架:Drv.js
Laravel 5.1 中使用 Vue2.0 组件化开发(配置)
vue+webpack在“双十一”导购产品的技术实践
Vue.js 快速入门
一步一步教你用Vue.js + Vuex制作专门收藏微信公众号的app

为您推荐

【译】60个有用CSS代码片段
史上最全 前端开发面试问题及答案整理
基于jQuery的一个简单的图片查看器
Markdown 语法简介和使用说明-详细版
Android类库框架汇总:awesome-android

更多

Vue.js
Vue.js开发
相关文档  — 更多
相关经验  — 更多
相关讨论  — 更多