Vue開發插件的簡單步驟

爲了每次老是能夠重複使用本身寫的組件，就把它改爲插件。

傳送門：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: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>'
    })
    // 將該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，讓須要的地方去import
export 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引入該插件

// 引入CSS
import './components/toast/toast.css'
// 引入toast.js
import Toast from './components/toast/toast'
// 引用Toast組件，並配置持續時間的參數，這裏若是添加了{}，
// 則默認參數跟着改變
Vue.use(Toast,{duration:2000})

最後，調用了，在要使用該組件的地方，調用

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

最終成果：刷新了一下頁面，就顯示出來，2ms後就消失。