vue 点击其它地方时, 隐藏该组件

最新推荐文章于 2024-05-19 17:48:45 发布

xu_xy10086

最新推荐文章于 2024-05-19 17:48:45 发布

阅读量522

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_42865514/article/details/105484307

本文介绍了一个Vue.js中处理组件点击事件的技巧，通过在组件外部点击时关闭组件，实现了弹窗或下拉菜单的优雅管理。代码示例展示了如何使用@click.stop和document.body的事件监听器来实现这一功能。

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

直接上代码！

<template>
  <div class="main">
 			<!-- 1.给此组件绑定点击事件 -->
	      <span @click.stop="clickHere" v-if="ifShow">此组件</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ifShow: false
    };
  },
  methods: {
  
	 // 2.方法
    clickHere() {
      var _this = this;
      this.ifShow= true;      
	 // 3.点击非组件时方法 
      function dnotShow(){
        _this.ifShow= false;
        document.body.removeEventListener('click',dnotShow)
      }
      document.body.addEventListener('click',dnotShow);
    }
  }
};
</script>