vue挂载全局组件

日常开发过程中封装了一些通用的公共组件，但是每次调用时不想引入组件结构，这时候就需要挂载到vue上供所有的实例用类似方法的形式调用，所以需要对组件进行注册。

假设我们封装一个公共组件confirm.vue，

然后我们把它挂载到vue上：

import Confirm from "./confirm";
export default {
  install(Vue) {
    function confirm(data = {}) {
      const { confirm, cancel, close, ...restProps } = data;
      const ConfirmConstructor = Vue.extend(Confirm);
      const instance = new ConfirmConstructor({
        el: document.createElement("div"),
        propsData: {
          ...restProps,
        },
      });
      if (confirm) {
        instance.$on("confirm", confirm);
      }
      if (cancel) {
        instance.$on("cancel", cancel);
      }
      document.querySelector("body").appendChild(instance.$el);
    }

    Vue.prototype.$confirm = confirm;

    return confirm;
  },
};

这时候我们就可以用方法调用了：

this.$confirm({
    title: "自定义标题",
    message: "自定义消息",
    cancelText: "cancel",
    confirmText: "ok",
    confirm: () => {
       alert("confirm");
    },
    cancel: () => {
       alert("cancel");
    },
});