前言：
现在随着vue的火热，网上出现了很多优秀的vue插件，功能强大，方便使用。但是我们在使用中是不是总觉得少了点什么？我们只是拿来用，却从来没有认真考虑过别人怎么写的，如何实现的，使用的永远是别人的，自己又如何能进步呢？所以接下来会通过一个简单的 vue-toast 插件，来了解掌握插件的开发和使用。这个例子也是我入门的例子，当然了也是网上找的，中间掺杂着自己的理解，也许有不正确的地方，欢迎指正，共同进步。
认识插件：
Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象options,（请查阅vue插件），如下：
MyPlugin.install = function (Vue, options) {//options设置选项就是指，在调用这个插件时，可以传一个对象。 // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件 Vue.mixin({ created: function () { // 逻辑... } ... }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 逻辑... } }
接下来要讲到的 vue-toast 插件则是通过添加实例方法实现的（也就是说可以使用其他3个方法也是可以的，看具体情况使用）。我们先来看个小例子。
案例
（1）、先新建个js文件来编写插件：toast.js。
var Toast = {}; Toast.install = function (Vue, options) { let opt = { defaultType:'bottom', // 默认显示位置 duration:'3000' // 持续时间 } for(let property in options){//这里options的值是根据Vue.use()传入的，如果没传，这里options就是undefined opt[property] = options[property]; // 使用 options 的配置 } Vue.prototype.$mytoast = (tips,type) => { if(type){ opt.defaultType = type; // 如果有传type，位置则设为该type } if(document.getElementsByClassName('vue-toast').length){ // 如果toast还在，则不再执行 return; } let toastTpl = Vue.extend({ template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>' }); let tpl = new toastTpl().$mount().$el; document.body.appendChild(tpl); setTimeout(function () { document.body.removeChild(tpl); }, opt.duration) } ['bottom', 'center', 'top'].forEach(type => {//forEach,遍历数组里的值传入回调函数 Vue.prototype.$mytoast[type] = (tips) => {//中括号运算符可以用字符串变量的内容作为属性名。点运算符不能 return Vue.prototype.$mytoast(tips,type) } }) } module.exports = Toast;// export default Toast也是可行的
（2）、在 main.js 中，需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件：
// main.js import Vue from 'vue'; import Toast from './toast.js'; Vue.use(Toast);
（3）、然后，我们在组件中来获取该插件定义的 $mytoast 属性。
// App.vue export default { mounted(){ this.$mytoast.center('这个是弹窗里的文字'); } }
效果图如下：
Vue.use(Toast).png
讲解：
··· let toastTpl = Vue.extend({ template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>' }); let tpl = new toastTpl().$mount().$el;
1、 vm.$mount()是手动地挂载一个未挂载的实例，参见：vm.$mount
2、el，提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用 vm.$el 访问。参见： vm.$el
3、在步骤(2)中，我们通过全局方法 Vue.use(Toast)来使用插件，注意这里我们并没有传入可选的选项对象options，这么引用的话，步骤（1）里的如下代码：
for(let property in options){//这里的options是undefined的，也就是说这个是没有效果的 opt[property] = options[property]; }
如果我们想改变效果应该如下使用：
// main.js import Vue from 'vue'; import Toast from './toast.js'; Vue.use(Toast,{ defaultType:'too', duration:'5000' });
这样就可以改变默认的设置值。
上面的代码已经可以算是一个完整的插件写法了，但是调用起来不是那么方便，只能this.$mytoast.center('这个是弹窗内容');这样调用，如果我们想如下调用：
export default { mounted(){ this.$mytoast('99999999999',{ defaultType:'top', // 默认显示位置 duration:'3000' // 持续时间 }) } }
如何实现呢？那我们的toast.js，代码改写如下：
var Toast = {}; Toast.install = function (Vue) { let opt = { defaultType:'bottom', // 默认显示位置 duration:'3000' // 持续时间 } Vue.prototype.$mytoast = (tips,type) => { if(type){ for(let property in type){ opt[property] = type[property]; // 使用 options 的配置 } } if(document.getElementsByClassName('vue-toast').length){ // 如果toast还在，则不再执行 return; } let toastTpl = Vue.extend({ template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>' }); let tpl = new toastTpl().$mount().$el; document.body.appendChild(tpl); setTimeout(function () { document.body.removeChild(tpl); }, opt.duration) } } module.exports = Toast;
main.js如下
// main.js import Vue from 'vue'; import Toast from './toast.js'; Vue.use(Toast);//这里我们就不传入options可选项了
到此就完结了，自己可以动手敲一敲代码，观察一下有什么区别。
见解：
按照我们上边写的这个方法，主要关注下边这个方法：
Vue.prototype.$mytoast = (tips,type) => { .... 判断，其它逻辑 } 这个方法我们写在toast.js里，然后我们又把toast.js导入到了main.js里， 等于说我们在main.js里注册了一个全局的变量$mytoast，方便我们在后边直接this.$mytoast()调用
到此完结。
