覆盖全部界面的模态框切换

覆盖全部界面的模态框

界面

<template>
    <div class="login">
    </div>
</template>

    .login {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.3);
    }

逻辑

实现功能：点击父组件显示，点击子组件消失

实现逻辑就是靠标志位is_login的true or false，和子父组件传值

父

<Login v-if="is_login" @close="close_login"/>

子

<template>
    <div class="login" @click="close_login">
    </div>
</template>
            close_login() {
                this.$emit('close')
            },