vue3中的setup使用全局混入mixin或provide/inject,实现全局登录弹窗操作
Published on:2022-05-09
虽然在vue3中不再推荐使用mixin了,但是有时候我们在某些需求的时候,使用mixin还是比较方便
下面简单一个案例:网站中登录是弹窗,在任何一个页面都有可能需要调用弹窗进行登录
一、创建全局混入插件,global.js
import LoginModal from '@/components/LoginModal'export default {install(app) {//实现一个全局登录组件,未登录的时候,点击页面按钮进行弹窗登录//1.先注入一个全局组件,在需要的地方直接使用//<login-modal :show-login="loginVisible" @no-login-emit="_noLoginFunc"></login-modal>app.component('login-modal', LoginModal)//2.全局混入登录方法app.mixin({data() {return {loginVisible: false //是否显示登录框}},methods: {//用于组件调用//也用于子组件通过emit调用关闭登录框//在setup中使用该方法// const { proxy } = getCurrentInstance()// proxy._noLoginFunc(true)_noLoginFunc(type = true) {this.loginVisible = type}}})}}
二、创建一个弹窗登录组件
<template><teleport to="body"><el-dialog v-model="showLogin" title="登录/注册"><div class="form"><div><el-button @click="cancelLogin">关闭</el-button><el-button type="primary" @click="toLogin">登录</el-button></div></div></el-dialog></teleport></template><script setup>import { inject } from 'vue'import { ElDialog, ElButton } from 'element-plus'defineProps({showLogin: {type: Boolean,default: () => true},noLoginEmit: {type: Function,default: () => {}}})//登录操作function toLogin() {closeLogin(true)}//取消登录function cancelLogin() {closeLogin(false)}//emit使用const emit = defineEmits(['noLoginEmit'])//provider/inject,登录成功刷新页面const reload = inject('reload')//关闭登录function closeLogin(isLogin = false) {if (isLogin) {reload()}//调用父级传入的属性方法,关闭弹窗emit('noLoginEmit', false)}</script>
三、在需要的时候调用
<template><button @click="showLogin">点击登录</button><div>主要用于常见的弹窗登录,在任何一个页面都有可能会使用弹窗登录</div><login-modal :show-login="loginVisible" @no-login-emit="_noLoginFunc"></login-modal></template><script setup>import { getCurrentInstance } from 'vue'//通过下面方法调用全局混入的方法const { proxy } = getCurrentInstance()function showLogin() {proxy._noLoginFunc(true)}</script>
使用provide/inject实现,这个就比较简单了,不需要创建global.js了
1.在App.js中引入组件以及创建provide方法
<template><div id="app"><login-modal :show-login="loginVisible" @no-login-emit="_showLogin" /><router-view /></div></template><script setup>import { ref, provide} from 'vue'const loginVisible = ref(false)const _showLogin = (type = true) => {loginVisible.value = type}provide('_showLogin', _showLogin)</script>
2.在需要的地方直接inject
const _showLogin = inject('_showLogin')function showlogin() {_showLogin()}
留言列表(0)
加载更多
留言
开源项目
- B5LaravelCMF:基于laravel9+bootstrap3实现的快速开发后台
- B5YiiCMF:基于Yii2+bootstrap3 实现的快速开发后台管理系统
- B5ThinkCmf:基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
- B5GoCmf:gin + sqlx +bootstrap 实现后端管理系统
- See also:gitee.com@b5net
最新评论
pcy
:前排围观
Louis
:冰舞的博客使用yii框架做的吧,B5ThinkCMF在本地部署后,登录系统的响应时间要比B5YiiCMF的登录时间长,还有一些Bug待修复
w1
on Electron+vue搭建项目或将vue项目转为electron
:大佬
34
:感谢你的开源项目
奥德赛
on Electron+vue搭建项目或将vue项目转为electron
:大声道奥术大师大声道
cmf
:你好 你的B5ThinkCMF下载后有点问题 能帮忙解决下么?
laravel新手
:您好,laravel9+bootstrap3实现的快速开发后台,下载部署后,刷新加载,F12我看了下,我部署的是240毫秒左右,您部署的测试版本只有50毫秒左右,能辛苦指导下,如何优化lv吗,谢谢
瀑布
:你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
瀑布
:你好,今天看到你的开源项目,很喜欢,感谢你的开源
冰舞
on Laravel定时任务的实现
:测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试
文章分类
标签