在这篇文章中介绍了toast是什么，这篇文章主要介绍toast的开发与使用。
开发
Vuejs很流行，并且官方也给出了路由插件vue-router、数据管理插件vuex，但是我们仅仅停留在了使用的阶段，如果能够尝试一下自己开发，并且npm上传，那么对于个人的进步我想还是很大的。
什么是插件
Vue.js的插件有一个公开方法install, 这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象。 如// MyPlugin就是插件的名称, 所有的插件都需要使用install这个公开方// 第一个参数是Vue构造器，因此我们可以在这个方法中使用Vue, 第二个参数是一个选项对象。
MyPlugin.install = function (Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性，如: vue-custom-element // 逻辑... }
// 这里通过 Vue.directive 来进行自定义指令。
// 其中my-derective就是指令的名称。
// bind是自定义指令提供的钩子函数。而el、binding、vnodes、oldVnode都是钩子函数绑定的参数
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自定义指令）
下面要讲的 vue-toast 插件就是通过添加实例方法来实现的， 比如下面的这个例子，首先新建一个js文件来编写插件： speak.js
var Speak = {}; Speak.install = function (Vue, options) { Vue.prototype.$words = "Hello, John!" } module.exports = Speak;
即 Speak 就是插件的名称，我们绑定了一个$words 属性。 定义好了之后，导出。
在main.js中，需要导入 Speak.js 并且通过全局方法 Vue.use() 来使用插件。(比如我们所用的vuex和vue-router都是先在 main.js 中导入，然后必须使用 Vue.use)。
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import router from './router' import store from './store/'
import Speak from './assets/js/speak.js' Vue.use(Speak) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, })
最后，我们就可以在组件中来获取到该插件定义的$words 属性了，
// Personal.vue export default { created(){ alert(this.$words); // Hello John! } }
然后我们我就可以发现这个组件生效了。
开发 vue-toast
实现需求：
同之前举例一样，在main.js引入之后可以在组件中通过调用 this.$toast("网络请求失败") 来弹出提示， 默认在底部显示，我们还可以通过 this.$toast.top() 或者 this.$toast.center() 等方法来实现在其他位置的显示。
思路：
其实toast还是很简单的，就是提示消息，并在一定时间内自动清除，所以，需要提示的时候，我们可以在body中添加一个div来显示提示信息， 而不同的位置通过添加不同的类名定位。
start！
// toast.js var Toast = {}; Toast.install = function (Vue, options) { Vue.prototype.$toast = (tips) => { let toastTpl = Vue.extend({ // 1、创建构造器，定义好提示信息的模板 template: '<div class="vue-toast">' + tips + '</div>' }); let tpl = new toastTpl().$mount().$el; // 2、创建实例，挂载到文档以后的地方 document.body.appendChild(tpl); // 3、把创建的实例添加到body中 setTimeout(function () { // 4、延迟2.5秒后移除该提示 document.body.removeChild(tpl); }, 2500) } } module.exports = Toast;
通过上面寥寥十几行代码我们就实现了this.$toast，接下来就可以显示不同的位置。
即首先定义Toast这个插件，然后在Vue上定义实例方法 toast , 这个方法中，我们首先创建一个构造器，然后通过new来实例化一个实例并挂在到$el（即Vue挂载的元素）上， 这样，一个定义好的模板就实现了，接着我们将它插入到DOM中，等到一段时间之后 （如2500ms） 就移除这个div。 而其中的tips可以是一个字符串，即我们希望提示的信息。这样我们就可以通过 this.$toast("新建地址成功！") 来使用 toast 了！
补充知识：
// toast.js ['bottom', 'center', 'top'].forEach(type => { Vue.prototype.$toast[type] = (tips) => { return Vue.prototype.$toast(tips,type) } })
这里，我们将bottom、center、top所组成的数组进行遍历来设置 $toast[type]方法，这样就是我们就可以通过$toast.type来调用了， 而$toast[type]方法显然都是一个函数，他们接受一个参数tips， 最后返回一个对应的方法Vue.prototype.$toast(tips,type)。
可以看到这时候我们就需要重新修改一个$toast方法了：
Vue.prototype.$toast = (tips,type) => { // 添加 type 参数
let toastTpl = Vue.extend({ // 模板添加位置类
template: '<div class="vue-toast toast-'+ type +'">' + tips + '</div>'
});
...
}这样，如果我们不传递参数，那么type就是undefined， 只要在类名中我们不设置 undefined相关的就可以了，而如果type是bottom之类的时候，我们在css中定义相关的样式，就可以正确显示了。
OK！ 到这里，其实已经完成了大体框架的大部分了！ 但是如果我希望默认在顶部显示，那么我每次都需要调用 this.$toast.top() 好像就太麻烦了， 另外，如果我们希望div停留的时间不是 2500ms 而是随着不同的需求而改变的呢？ 这时候，其实我们可以利用之前所提到过的options参数来实现了！ 在Vue.use()中通过 options来传进我们想要传递的参数就可以。 最终修改如下：
var Toast = {}; Toast.install = function (Vue, options) { let opt = { defaultType:'bottom', // 默认显示位置 duration:'2500' // 持续时间 } for(let property in options){ 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; } 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 => { Vue.prototype.$toast[type] = (tips) => { return Vue.prototype.$toast(tips,type) } }) } module.exports = Toast;
这样，一个简单的vue插件就完成了， 我们可以通过 npm 打包发布， 这样下次使用时就可以通过 npm install 来安装了！