完成弹框遮罩, 点击其他地区弹框封闭

就是完成一个弹窗,在点击内容的时刻不封闭,在点击其他地区的时刻封闭弹窗

能够依据事宜冒泡来处理这个题目

//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;
                    }
                }
            }
        }
    }
    原文作者:Dong
    原文地址: https://segmentfault.com/a/1190000018824773
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞