w-component-ui/src/components/toast/toast.js

w Vue components project

//引用模板文件
import Toast from './WToast.vue';
//新建一个对象，用来保存实例
let plugin = {};
//删除dom元素
let removeDom = (el) => {
  el.parentNode.removeChild(el);
};
plugin.install = function (Vue) {
  const ToastController = Vue.extend(Toast);
  // 实现toast的关闭方法
  ToastController.prototype.close = function () {
    removeDom(this.$el);
  };
  // 在Vue的原型上实现toast的挂在以及功能实现
  // 用户可以再Vue实例通过this.$Toast来访问以下的内容
  Vue.prototype.$toast = (option = {}) => {
    //toast实例挂在到刚创建的Div
    let instance = new ToastController().$mount(document.createElement('div'));
    instance.duration = option.duration || instance.duration;
    // 用户可以设置message属性也可以不设置，不设置时：则直接将option的内容作为message的信息进行toast内容展示
    instance.message = option.message || option;
    // 将toast挂在到DOM上
    document.body.appendChild(instance.$el);
    //实现自动关闭
    setTimeout(function () {
      instance.close();
    }, instance.duration)
  }

};

export default plugin;