 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from "vue";
import login from "./login.vue";
import store from "../../store";
const PopupBox = Vue.extend(login);
let instance;
login.install = function(data) {
  instance = new PopupBox({
    data
  }).$mount();
  instance.$store = store;
  document.body.appendChild(instance.$el);
 
  Vue.nextTick(() => {
    instance.showLogin();
  });
};
login.unInstall = function() {
  if (instance) {
    document.body.removeChild(instance.$el);
    instance.$destroy();
    instance = null;
  }
};
export default login;

之后，在main.js里加入：

1
2
import login from "./components/Login/login";
Vue.prototype.$login = login;

这个时候，就可以在有需要的地方，使用install()来挂在弹框：

1
this.$login.install();

在需要关闭弹框的地方，就用：

1
this.$login.unInstall();

还可以往组件传参，比如要传一个id：

1
2
3
4
5
 instance = new PopupBox({
    propsData:{
      id:id
   }
  }).$mount();

这样在登录组件里，id就是props的存在啦~或者之间用data覆盖。

纯js调用公共组件弹框弹窗

setup 和 tsx

参考