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

<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 @ 2024-05-11 17:35  枫若  阅读(125)  评论(0编辑  收藏  举报