自定义 toast 组件

利用 Vue.extend

一、新建 toast.js 文件

import Vue from 'vue'
import ToastVue from './toast.vue';
const ToastConstructor = Vue.extend(ToastVue);

let removeDom = event => {
  event.target.parentNode.removeChild(event.target);

};
ToastConstructor.prototype.close = function() {
  this.visible = false;
  this.$el.addEventListener('transitionend', removeDom);
};

const Toast = (options = {},callback) => {
  var instance = new ToastConstructor().$mount(document.createElement('div'))
  let duration = options.duration || 2500;
  instance.message = typeof options === 'string' ? options : options.message
  instance.position = options.position || 'top'
  document.body.appendChild(instance.$el);
  instance.visible = true;
  Vue.nextTick(() => {
    instance.timer = setTimeout(function() {
      instance.close();
      callback&&callback();
    }, duration);
  })
  return instance
}


export default Toast

新建一个 toast.vue 文件
去写你得toast UI

三、使用
引入
import showToast from ‘./toast.js’;

showToast(msg);