点击弹框外任意元素隐藏弹框

1.使用监听方法。点击元素不是弹出框则隐藏

<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.使用遮罩层.。点击遮罩层隐藏弹框

<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>