Haga clic en cualquier elemento fuera del cuadro de viñetas para ocultar el cuadro de viñetas

1. Utilice el método de seguimiento. Haga clic en el elemento no es un cuadro emergente para ocultar

<template>
   <div v-if="showAlert" class="alert" 
        style="position: fixed;top: 100px;width: 200px;height: 200px;background: #ccc;">测试弹框
    </div>
</template>

<script>

    export default{
        name: 'index',
        data(){
            return{
                showAlert: true,
            }
        },
        mounted () {
            document.addEventListener('click', (e)=> {
                if (e.target.className != 'alert') {
                    this.showAlert = false;
                }
            })
        }
    }
</script>

 

2. Utilice una capa de máscara ... Haga clic en la capa de la máscara para ocultar el marco de la viñeta

<template>
    <div class="out-box" v-show="showAlert" @click.self="showAlert=false">
       <div class="alert" 
            style="position: fixed;top: 100px;width: 200px;height: 200px;background: #ccc;">测试弹框
        </div>
    </div>
</template>

<script>

    export default{
        name: 'index',
        data(){
            return{
                showAlert: true,
            }
        },
        mounted () {
           
        }
    }
</script>
<style>  
 .out-box{
    position: fixed;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .5);
    &::-webkit-scrollbar{
      display: none;
    }
}
</style>