如何开发一个移动web UI组件库：vue插件篇
youngwind opened this issue · 6 comments
问题由来
继上一篇 #80 ，本篇着重讨论vue插件在组件库中的作用。
对于toast组件，如果我采取跟button这些普通UI组件一样的方式的话，会存在一些问题。
假设这样一个调用场景：页面当中有一个按钮，点击按钮弹toast，toast的内容和回调函数均可自定义。
调用toast组件的伪代码如下
// example.html
<div id='#app'>
<button v-on:click='showToastA'></button>
<toast :show.sync="toast.show">
{{toast.content}}
</toast>
</div>// example.js
new Vue({
el: '#app',
data: {
toast:{
show: false,
content:"Toast A内容"
}
},
method:{
showToastA:function(){
this.toast.show = true;
},
onShowToast:function(){
// 显示Toast A
},
onHideToast:function(){
// 隐藏Toast A
}
},
watch: {
toast: function(val){
if(val.show){
this.onShowToast();
} else {
this.onHideToast();
}
}
}
})问题在于：我只是想点击的时候弹出toast而已，为什么需要我一开始就在html和js中定义这个toast的内容和回调？很多时候我都无法预知什么时候会出现toast，比如我很可能在一个ajax的回调里面调用toast。更为关键的是假如有两个按钮呢？如果他们的内容和回调函数都不一样呢？难道我需要在html中实例化两个toast，在js中定义四个function？太麻烦了！
显然，如果编写toast组件仍然采取普通的组件方式，会导致很多的问题。
在探讨合适的toast组件编写方式之前，我们先来看看我们想象当中的调用方式应该是怎么样的。
我想要的
从jquery时代过来的人，可能会很熟悉这样的写法：
$.toast.show({
content: '显示内容',
onShow:function(){
// 显示回调函数
},
onHide: function(){
// 隐藏回调函数
}
})没错。虽然现在已经是组件化通行的时代了。但是，对于toast这种东西，上面的写法依然是更为优雅的调用方式。所以，我们来看看如何在vue组件化中实现这样的调用方式。
Vue插件机制
我在碰到这个难题的时候，正好vux的作者也在做这样的改良，查看他写的代码，我发现其实是使用了vue的插件机制。
模（抄）仿（袭）着大牛的代码，很快我也写完了toast插件。下面说一下我的理解。
vue插件是一个全局性的东西，在vue model第一次初始化的时候就会执行里面的install方法，并且只会执行一次。如下图所示，页面刚刚初始化完成之后，其实toast插件就已经在DOM元素当中了，只不过没有显示出来而已。之后无论我们调用show还是hide方法，不过是修改这个实例的数据和回调方法。回调函数什么时候执行呢？是由watch监听show字段来决定调用时机的。
遗留问题：
之前一直在用vue-touch，现在才发现原来这也属于vue插件。之后有时间研究一下如何用vue插件编写自定义指令。
“抄袭”打错啦
e。。。toast 是什么？
e。。。toast 是什么？
https://cn.vuejs.org/v2/guide/plugins.html “vue的插件机制”， 链接的网站换成这个地址了
e。。。toast 是什么？
可以理解为手机上的消息提示框