在vue中封装可复用的组件方法

// 公共提示信息js
import Vue from "vue";
import Toast from "./dialogMessage.vue"; //引入组件  要使用这个组件
// 返回一个“扩展实例构造器”
let ToastConstructor = Vue.extend(Toast);

let myToast = (text, duration) => {
  let toastDom = new ToastConstructor({
    el: document.createElement("div") //将toast组件挂载到新创建的div上
  });
  document.body.appendChild(toastDom.$el); //把toast组件的dom添加到body里

  toastDom.text = text;
  toastDom.duration = duration;

  // 在指定 duration 之后让 toast消失
  setTimeout(() => {
    toastDom.dialogVisible = false;
  }, toastDom.duration);

  // 调用时  this.$toast("新内容", 1000);
};
export default myToast;

将上面封装的挂载到vue原型上

import toast from "./components/dialogMessage.js"; //引入toast函数
Vue.prototype.$toast = toast;