Vue3如何在挂载到全局的插件中使用第三方UI库

Question

需求是一个全局的登录弹窗
在vue2我是extend一个子类，实例化后挂在全局，并把显示弹窗的方法挂在在原型上。
vue2这样写

// plugins/LoginDialog.js
import LoginDialogCom from "@/components/LoginDialog.vue";

export default {
  install: function (Vue) {
    const LoginDialogConstructor = Vue.extend(LoginDialogCom);
    const instance = new LoginDialogConstructor();

    instance.$mount(document.createElement("div"));
    document.body.appendChild(instance.$el);

    Vue.prototype.$loginDialog = () => {
      instance.loginVisible = true;
    };
  },
}; 

vue3没有extend，我这样写

// plugins/LoginDialog.js
import LoginDialogCom from '@/components/LoginDialog.vue';

import { createApp } from 'vue';

export default {
  install: (app) => {
    const instance = createApp(LoginDialogCom).mount(
      document.createElement('div')
    );
    document.body.appendChild(instance.$el);
    app.config.globalProperties.$loginDialog = () => {
      instance.loginVisible = true;
    };
  }
};

// main.js
createApp(App).use(Antd).use(loginDialog).mount("#app"); 

被挂载的LoginDialogCom中使用了antdv的模态框，但a-modal无法正确被加载（Failed to resolve component: a-modal），查看elements还是a-modal标签

image.png1128×268 30.4 KB
访问↓查看代码
https://codesandbox.io/s/sleepy-tdd-4ycsb

Answer 1

你这样写是有问题的，LoginDialog.js 另外调用createApp，你ant组件只在main.js里面创建的app注册过。你应该使用app.defineComponent创建挂载组件