Vue.js 插件开发详解
前言
随着Vue.js越来越火，Vue.js的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的vue-router、vuex等，都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段，比较少自己开发。所以接下来会通过一个简单的vue-toast插件，来了解掌握插件的开发和使用。
认识插件
想要开发插件，先要认识一个插件是什么样子的。
Vue.js的插件应当有一个公开方法install。这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象:
MyPlugin.install=function(Vue,options){
Vue.myGlobalMethod=function(){//1.添加全局方法或属性，如:vue-custom-element
//逻辑...
}
Vue.directive('my-directive',{//2.添加全局资源：指令/过滤器/过渡等，如vue-touch
bind(el,binding,vnode,oldVnode){
//逻辑...
}
...
})
Vue.mixin({
created:function(){//3.通过全局mixin方法添加一些组件选项，如:vuex
//逻辑...
}
...
})
Vue.prototype.$myMethod=function(options){//4.添加实例方法，通过把它们添加到Vue.prototype上实现
//逻辑...
}
}
接下来要讲到的vue-toast插件则是通过添加实例方法实现的。我们先来看个小例子。先新建个js文件来编写插件：toast.js
//toast.js
varToast={};
Toast.install=function(Vue,options){
Vue.prototype.$msg='HelloWorld';
}
module.exports=Toast;
在main.js中，需要导入toast.js并且通过全局方法Vue.use()来使用插件：
//main.js importVuefrom'vue'; importToastfrom'./toast.js'; Vue.use(Toast);
然后，我们在组件中来获取该插件定义的$msg属性。
//App.vue
exportdefault{
mounted(){
console.log(this.$msg);//HelloWorld
}
}
可以看到，控制台成功的打印出了HelloWorld。既然$msg能获取到，那么我们就可以来实现我们的vue-toast插件了。
开发vue-toast
需求：在组件中通过调用this.$toast('网络请求失败')来弹出提示，默认在底部显示。可以通过调用this.$toast.top()或this.$toast.center()等方法来实现在不同位置显示。
整理一下思路，弹出提示的时候，我可以在body中添加一个div用来显示提示信息，不同的位置我通过添加不同的类名来定位，那就可以开始写了。
//toast.js
varToast={};
Toast.install=function(Vue,options){
Vue.prototype.$toast=(tips)=>{
lettoastTpl=Vue.extend({//1、创建构造器，定义好提示信息的模板
template:''+tips+' 好像很简单，我们就实现了this.$toast()，接下来显示不同位置。
//toast.js
['bottom','center','top'].forEach(type=>{
Vue.prototype.$toast[type]=(tips)=>{
returnVue.prototype.$toast(tips,type)
}
})
这里把type传给$toast在该方法里进行不同位置的处理，上面说了通过添加不同的类名(toast-bottom、toast-top、toast-center)来实现，那$toast方法需要小小修改一下。
Vue.prototype.$toast=(tips,type)=>{//添加type参数
lettoastTpl=Vue.extend({//模板添加位置类
template:''+tips+' 好像差不多了。但是如果我想默认在顶部显示，我每次都要调用this.$toast.top()好像就有点多余了，我能不能this.$toast()就直接在我想要的地方呢？还有我不想要2.5s后才消失呢？这时候注意到Toast.install(Vue,options)里的options参数，我们可以在Vue.use()通过options传进我们想要的参数。最后修改插件如下：
varToast={};
Toast.install=function(Vue,options){
letopt={
defaultType:'bottom',//默认显示位置
duration:'2500'//持续时间
}
for(letpropertyinoptions){
opt[property]=options[property];//使用options的配置
}
Vue.prototype.$toast=(tips,type)=>{
if(type){
opt.defaultType=type;//如果有传type，位置则设为该type
}
if(document.getElementsByClassName('vue-toast').length){
//如果toast还在，则不再执行
return;
}
lettoastTpl=Vue.extend({
template:''+tips+'