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脚手架中如何全局注册组件。
