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");
    },
});