点击任意区域-修改div展示状态

1. 前言

若需要做一个弹窗or其他形式的组件，需要在点击除本身之外的任意区域后，隐藏该区域的内容。

2. 问题

• 打开弹窗后，点击其他区域就关闭该弹窗。

3. 解答

部分代码：

//弹窗
<div class="card" v-show="treeRightClick" id="menu"></div>

mounted() {
 //点击任意位置关闭区域弹窗
 document.addEventListener('click',(e) => {
   //获取弹窗对象
   const userCon = document.getElementById('menu');
   //判断弹窗对象中是否包含点击对象
   if(userCon &&　!userCon.contains(e.target)) {
      //如果包含则跳转回之前的页面
      this.treeRightClick = false;
   }
  })
},

4. 后记

其他比如半弹窗或者半屏遮盖等其他地方都能用。

5. 引用来源

作者：周金鱼啊

文章链接：Vue之点击弹窗之外的任意位置关闭弹窗