vue点击目标区域之外隐藏/关闭目标区域

最新推荐文章于 2024-06-14 10:05:51 发布

原创最新推荐文章于 2024-06-14 10:05:51 发布 · 8.4k 阅读

26 ·

CC 4.0 BY-SA版权

知识点专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在Vue中如何实现点击下拉框头部显示或隐藏下拉框，同时点击下拉框以外的区域也能关闭下拉框。提供了两种方法：一种是在DOM挂载后添加事件监听非目标区域；另一种是监听showDropdown，在下拉框显示时为body绑定点击事件以隐藏盒子。

在这里插入图片描述
如图为自己写的下拉框, 点击头部可实现控制下拉框盒子的显示与隐藏, 但是点击除了头部与下拉框以外的区域, 也需要关闭下拉框盒子, 实现方式如下：

html代码：（stop修饰符是用来阻止事件冒泡）

<template>
    <div class="root">
       <div class="dropdownMenu">
         <div class="top" @click.stop="showDropdown=!showDropdown"></div>
         <div class="box" v-show="showDropdown"></div>
       </div>
    </div>
</template>

方法一：在dom挂载完成后添加事件，点击非目标区域执行代码关闭下拉框盒子

mounted(){
  // 模拟外部点击
  document.addEventListener('click', (e) => {
    if (e.target.className !== 'dropdownMenu') {
      this.showDropdown = false
    }
  })
},
// 在组件生命周期结束时销毁
beforeDestroy() {
   window.removeEventListener('click', () => {}, true)
}

方法二：监听showDropdown，下拉框显示时对body绑定点击事件，点击便隐藏盒子

  watch: {
    showDropdown (val) {
      if (val) {
        document.body.addEventListener('click', () => {
          this.showDropdown = false
        })
      } else {
        document.body.removeEventListener('click', () => {})
      }
    }
  }