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

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

    开源项目
    • B5LaravelCMF:基于laravel9+bootstrap3实现的快速开发后台
    • B5YiiCMF:基于Yii2+bootstrap3 实现的快速开发后台管理系统
    • B5ThinkCmf:基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
    • B5VueCMF_H5:vue3.0 + Webpack/Vite + Vuex + VueRouter + Vant3 搭建快速开发基本Demo
    • See also:gitee.com@b5net
    最新评论
    瀑布 :你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
    瀑布 :你好,今天看到你的开源项目,很喜欢,感谢你的开源
    冰舞 on Laravel定时任务的实现 :测试测试测试测试测试测试 测试测试测试测试测试测试测试测试测试测试
    文章分类