B5net

人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

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)

    留言

    B5net

    人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

    开源项目
    最新评论
    wpstqe :作者大大有没有建一个QQ群的计划?
    流浪的PHPer :感谢开源项目,快速开发非常的好用!
    小白 :大佬您好 请问一下 http://b5laravelcmf.b5net.com/admin这个演示网址的全部代码有吗,gitee上不全呢,还能提供一下吗,感激不尽阿
    tz :大佬 B5YiiCMF 还开放吗
    weifox on GoLang常用的三方库 :还有 https://github.com/golang-module/carbon
    php :关于导出功能:1、B5thinkCMF部署后 参数的导出功能点击后就白屏了,不知道是哪里有问题?2、人员部门的导出功能没看懂怎么配置的? 只是启用exportshow=true吗 方便的话请答复下,谢谢!
    初学者 :您好! 部署了您的B5ThinkCMF,请教下 使用新增功能如何实现二级联动呢 ?谢谢
    11 :22
    pcy :前排围观
    Louis :冰舞的博客使用yii框架做的吧,B5ThinkCMF在本地部署后,登录系统的响应时间要比B5YiiCMF的登录时间长,还有一些Bug待修复
    文章分类