vue 点击某个div以外的区域,将这个div隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div class="header_sty" id="header_sty">
    <div v-if="mobilMenu">test</div>
  </div>
</template>
 
<script>
 data(){
  return{
    mobilMenu :false,
  }
 },
 created () {
   window.addEventListener('click', this.handleClickOutside, true)
 },
 
 destroyed () {
     if (process.browser) {
       window.removeEventListener('click', this.handleClickOutside, true)
     }
  },
 
 methods: {
   handleClickOutside (event) {
      const divToHide = document.getElementById('header_sty')
      if (divToHide && !divToHide.contains(event.target)) {
        this.mobilMenu = false
      }
    },
 }
</script>

  

 

posted @   枫若  阅读(664)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类
历史上的今天:
2018-05-11 react项目加d3.js
点击右上角即可分享
微信分享提示