Vue封装全局注册弹窗组件，实现全局调用。

前言

很多网站都会有权限控制，比如一些博客网站的评论系统，必须要用户登录后才能发起评论，如果未登录想要评论，网站则会弹出登录弹窗。这个登录弹窗可以任何需要权限的地方弹出，所以这个弹窗组件我们就必须封装为共有的，共全局调用。

1.编写登录弹窗组件

新建LoginDialog.vue登录弹窗文件，编写组件基本代码，登录弹窗样式由自己决定。

// 这里只给出登录方法，其它方法类似
    async userLogin() {
      let params = {
        email: this.formLogin.email,
        password: this.formLogin.password,
      };
      const data = await userLogin(params);
      if (data.code === "00000") {
        this.$message.success("登录成功");
        this.login(data); // 登录成功回调
        this.close(); // 关闭弹窗
      } else {
        this.$message({
          message: data.message,
          type: "error",
        });
      }
    },

2.编写全局组件注册代码

新建LoginDialog.js文件，用来将弹窗组件注册为全局组件。

import Vue from "vue";
import login from "../components/LoginDialog/LoginDialog.vue"; // 引入弹窗组件

const LoginDialog = Vue.extend(login);

login.install = function(data) {
  let instance = new LoginDialog({
    data,
  }).$mount();

  document.body.appendChild(instance.$el);

  Vue.nextTick(() => {
    instance.open();
  });
};

export default login; // 导出

3.将组件挂载到原型上

在main.js中引入LoginDialog.js，并将其挂载到全局。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import login from "./common/LoginDialog"; // 登录弹窗全局组件

Vue.prototype.$login = login.install; // 全局可使用this.$login调用

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

4.全局任何地方调用

比如导航栏上的登录按钮，点击之后我们就直接调出该弹窗，可自行注册回调函数。比如点击登录弹窗中的登录按钮，如果登录成功则执行login回调函数。

// 打开登录注册弹窗
    openLoginDialog() {
      this.$login({
        login: (data) => {
          if (data) {
            // 登录回调函数
          }
        },
        register: (data) => {
          if (data) {
            // 注册回调函数
          }
        },
      });
    },

除了导航栏之外，还可以写在路由前置里面，当用户想要访问某个页面没有权限时，则弹出登录弹窗。

import router from "@/router/index";
import login from "../common/LoginDialog"; // 登录弹窗
// 路由前置守卫
router.beforeEach((to, from, next) => {
  let token = localStorage.getItem("token");
  if (token || !to.meta.auth) {
    next();
  } else {
    if (to.path === "/") {
      next();
    } else {
      login.install();
    }
  }
});

总结

封装全局注册登录弹窗最重要的一点就是在vue脚手架中如何全局注册组件。