为了每次总是可以重复使用自己写的组件，就把它改成插件。

传送门：https://www.cnblogs.com/linxin/p/6637904.html

案例是从这里学习的。但用法跟直接引入mint-ui这些有些不同。

Vue插件开发方法（官网）：https://cn.vuejs.org/v2/guide/plugins.html#开发插件

toast.js代码：

var Toast = {}Toast.install = function (Vue, options) {  // 默认参数，defaultType：toast的位置；duration：持续多少时间消失  let opt = {    defaultType: 'bottom',    duration:'1000'  }  // 将Vue.use({})里面的参数重新赋值给opt  for(let property in options){    opt[property] = options[property];    console.log(opt[property])  }  // 调用的时候直接 this.$toast调用该插件  Vue.prototype.$toast = (tips, type) => {    // toast的位置，该位置的CSS写在了toast.css    if(type){      opt.defaultType = type;    }    // 只允许一个toast存在    if(document.getElementsByClassName('vue-toast').length){      return;    }    let toastTpl = Vue.extend({      // toast的html模板      template: '
     
      ' + tips + '
     
'    })    // 将该toast手动挂载到$el    let tpl = new toastTpl().$mount().$el;    document.body.appendChild(tpl);    setTimeout(function () {      // 持续多少时间后，将toast移除      document.body.removeChild(tpl);    },opt.duration);  }  // 通过this.$toast.bottom() 调用组件，直接显示位置  ['bottom', 'center', 'top'].forEach(type => {    Vue.prototype.$toast[type] = (tips) => {      return Vue.prototype.$toast(tips, type)    }  })}// 导出toast，让需要的地方去importexport default Toast;

toast.css

.vue-toast {
     border:1px solid #e6e6e6;  box-shadow:2px 2px 1px #e6e6e6;  border-radius: 4px;  padding: 10px 50px;  position: absolute;  z-index: 1000;  color:#fff;  left:50%;  transform: translateX(-50%);}.toast-top {
     top:0;}.toast-bottom {
     bottom:0;}.toast-center {
     top:50%;  transform: translate(-50%,-50%);}

在main.js引入该插件

// 引入CSSimport './components/toast/toast.css'// 引入toast.jsimport Toast from './components/toast/toast'// 引用Toast组件，并配置持续时间的参数，这里如果添加了{}，// 则默认参数跟着改变Vue.use(Toast,{duration:2000})

最后，调用了，在要使用该组件的地方，调用

mounted(){    this.$toast.center('loading');  }

最终成果：刷新了一下页面，就显示出来，2ms后就消失。