vue做一个全局登录弹窗，任何地方可访问

步骤

1. 新建一个js文件，引入main.js

由于项目搭建是@/components/index.js负责注册全局组件，所以这里在@/components/index.js引入。

// @/components/index.js
import Vue from 'vue'
import '@/components/LoginDialog' //在这引入全局登录弹窗
import SvgIcon from '@/components/SvgIcon.vue'

Vue.component('SvgIcon', SvgIcon)

2. 新建一个实例，挂载到document.body

import Vue from 'vue'
import LoginDialog from './index.vue'

// 这里可以用Vue.extend()创建子类，但是我没打算注册为组件，就直接`new Vue`
const loginDialog = new Vue(LoginDialog) 
loginDialog.$mount(document.createElement('div'))
document.body.appendChild(loginDialog.$el)

Vue.prototype.$loginDialog = loginDialog

export default loginDialog

3. 路由守卫访问

直接引入实例

import router from './router'
import store from '@/store'
import loginDialog from '@/components/LoginDialog'

const whiteList = ['/']

router.beforeEach((to, from, next) => {
    if (store.getters.token) next()
    else if (whiteList.indexOf(to.path) > -1) next()
    else loginDialog.open()
})

4. 页面内访问

<vs-button @click="login" transparent>登录</vs-button>
login() {
    this.$loginDialog.open()
}

登录弹窗

1. 窗口关闭逻辑

LoginDialog弹窗代码

<template>
    <vs-dialog class="login-dialog" auto-width not-padding v-model="active">
        <el-form class="form">
            <vs-input autocomplete="off" label-placeholder="Username" color="rgb(59,222,200)" v-model="form.username">
                <template #icon>
                    <i class="bx bx-user"></i>
                </template>
            </vs-input>

            <vs-input type="password" label-placeholder="Password" color="rgb(59,222,200)" v-model="form.password">
                <template #icon>
                    <i class="bx bx-lock-open-alt"></i>
                </template>
            </vs-input>

            <vs-button block size="large">登 录</vs-button>
        </el-form>
    </vs-dialog>
</template>

<script>
export default {
    data() {
        return {
            active: false,
        }
    },
    methods: {
        open() {
            this.active = true
        },
    }
}
</script>

关闭逻辑就是Vuesax <vs-dialog>自带的关闭，我只关注了窗口打开，关闭是组件自己在处理。结果是，如果不打开，这个组件元素div就不会出现在html文件里；弹出时，就会出现。

2、需要登陆的按钮都触发窗口

1. 注册一个vue指令

import Vue from 'vue'
import loginDialog from '@/components/LoginDialog'
import store from '@/store'

Vue.directive('login', {
    bind: function (el) {
        // true能优先触发事件
        el.addEventListener('click', login, true)
    }
})

function login(e) {
    if (!store.getters.token) {
        // 用于取消所有后续事件捕获或事件冒泡，并阻止调用任何后续事件处理程序（DOM3 Events 中新增）
        e.stopImmediatePropagation()
        loginDialog.open()
    }
}

2. 指令login使用

<header>
    <vs-button v-login @click="other" transparent>其它</vs-button>
    <vs-button @click="login" transparent>登录</vs-button>
</header>
other() {
    console.log('v-login')
}