实现弹框遮罩, 点击其他区域弹框关闭

就是实现一个弹窗，在点击内容的时候不关闭，在点击其他区域的时候关闭弹窗

可以根据事件冒泡来解决这个问题

//html
<template>
    <div title="我是外层容器" v-show="show" @click="cancel">
        <div title="我是内容" @click.stop>dome</div>  //停止冒泡 stopPropagation()
    </div>
</template>


//js
export default {
        data(){
            return {
                show: true
            }
        },
        methods: {
            cancel(){
                this.show = false
            }
        }
    }

另一种方法

js的contains方法用来查看dom元素的包含关系

//html 
<template>
    <div title="我是外层容器" v-show="show">
         <div class="content" title="我是内容" @click="cancel">dome</div>
    </div>
</template>

//js
export default {
        data(){
            return {
                show: true
            }
        },
        methods: {
            cancel(event) {
                let content= document.getElementsByClassName("content")[0];
                if (content) {
                    if (!content.contains(event.target)) {
                    //如果点击到了class为content以外的区域
                        this.show= false;
                    }
                }
            }
        }
    }