vue 点击其他区域关闭自定义div
1、vue模块中的内容
<template> <div class="hello" @click="hidePanel"> <div id="myPanel" v-if="panelShow"></div> </div> </template>
第一步,我们在自己的vue模块中整体添加了一个hidePanel事件,准备整体区域进行点击,然后id为myPanel的div是我们要处理的那个小组件。
2、定义变量
data () { return { panelShow: true } }
3、第三步才是重点,其实大家都知道,要触发一个事件,然后这个事件还是点击事件,点击到我们这个id是 myPanel以外的地方才进行一些操作,也就是把panelShow赋值为false
methods: { hidePanel: function(event){ let sp = document.getElementById("myPanel"); if(sp){ if(!sp.contains(event.target)){//这句是说如果我们点击到了id为myPanel以外的区域 this.panelShow = false; } } } }