vue2.0点击其他任何地方隐藏dom

最新推荐文章于 2023-05-13 14:29:50 发布

weixin_30908103

最新推荐文章于 2023-05-13 14:29:50 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ToBeBest/p/8419170.html

本文介绍了一种在Vue中实现当点击目标元素之外的任何地方时隐藏特定DOM元素的方法。通过监听文档点击事件并检查点击位置是否位于目标元素内来实现这一功能。此外，还提供了一种适用于弹出层为独立组件时的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

methods: {
    handleBodyClick(){
        if (绿色区域出来了，要判断点击其他地方就要关闭，这样可以避免绿色区域已经关闭还在操作) {
          let _con = $(目标区域)
          if (!_con.is(e.target) && _con.has(e.target).length === 0) {
            // 点击目标区域外的时候关闭绿色区域
          }
        }
    },
},
mounted () {
  document.addEventListener('click', this.handleBodyClick)
},
destroyed () {
  document.removeEventListener('click', this.handleBodyClick)
}

原文参考《vue点击其它任何地方隐藏dom》

另外有一种隐藏整个组件的,比较适合一个弹出层是一个组件的情况

  mounted () {
    document.addEventListener('click', this.handleDocumentClick)
  },
  methods: {
    handleDocumentClick (e) {
      if (!this.$el.contains(e.target)) {
        this.isShow = false
      }
    }
  },
  destroyed () {
    document.removeEventListener('click', this.handleDocumentClick)
  }

转载于:https://www.cnblogs.com/ToBeBest/p/8419170.html