点击元素外区域-元素消失效果

最新推荐文章于 2026-06-24 10:45:09 发布

原创最新推荐文章于 2026-06-24 10:45:09 发布 · 265 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #vue.js #javascript

收录于

js基础知识专栏收录该内容

5 篇文章

订阅专栏

该代码段展示了在Vue应用中，组件挂载后监听全局点击事件。当点击的元素类名非iconfonticonjianchabaogao-tianjiamenu-btn或tan时，会关闭showReportTree属性关联的显示元素。

mounted() {
    document.addEventListener('click', this.clickContainer, false)
  },
methods: {
clickContainer(e) {
      if (e.target.className !== 'iconfont iconjianchabaogao-tianjia menu-btn' && e.target.className !== 'tan') { // 除去点击的类名，点击到其他类名都设置为false
        this.showReportTree = false // 控制元素现实与否的属性
      }
    }
}