Vue监听某个元素以外的区域被点击问题

更新时间：2023年10月21日 14:41:34 作者：懒员员

这篇文章主要介绍了Vue监听某个元素以外的区域被点击问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue监听某个元素以外的区域被点击

clickoutside是Element-ui实现的一个自定义指令，用来处理目标节点之外的点击事件

<template>
  <div class="">
    <div v-clickoutside="handler">text</div>
  </div>
</template>

 
<script>
import clickoutside from "element-ui/src/utils/clickoutside";
export default {
  directives: { clickoutside },
  data() {
    return {};
  },
  created() {},
  methods: {
    handler() {
      console.log("text以外被点击了");
    },
  },
};
</script>

vue中点击某个元素以外的元素时让这个元素隐藏或关闭

在实际开发中，可能会有点击某个元素以外的元素时让这个元素隐藏或关闭的需求。在Vue中实现则更加简单。

思路

为全局document添加click事件，判断是否为指定节点及其子节点，如果不是则隐藏该指定节点。

例如：

当前组件现有功能是：span默认不显示，当点击button时显示span。

点击非span button时span消失

<template>
  <div>
    <span v-show="isShow" ref="showPanel">没点击我我就消失了哦</span>
    <button @click.stop="isShow = true">显示</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    };
  },
  created() {
    document.addEventListener("click", e => {
      if (this.$refs.showPanel) {
        let isSelf = this.$refs.showPanel.contains(e.target);
        if (!isSelf) {
          this.isShow = false;
        }
      }
    });
  }
};
</script>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vuecli3.x中轻松4步带你使用tinymce的步骤
这篇文章主要介绍了vuecli3.x中轻松4步带你使用tinymce的步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
Vue 详解mixins混入用法大全
如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性，这时使用Vue mixins混入有很大好处，下面就介绍下Vue mixins混入使用方法，需要的朋友参考下吧
2021-08-08
vue中input的v-model清空操作
这篇文章主要介绍了vue中input的v-model清空操作，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
vue中watch的实际开发学习笔记
watch是Vue实例的一个属性是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,下面这篇文章主要给大家介绍了关于vue中watch的实际开发笔记,需要的朋友可以参考下
2022-11-11
Vue element ui用户展示页面的实例
这篇文章主要介绍了Vue element ui用户展示页面的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
深入解析Vue 组件命名那些事
本篇文章主要介绍了深入解析Vue 组件命名那些事，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
详解Vue Cli浏览器兼容性实践
这篇文章主要介绍了详解Vue Cli浏览器兼容性实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现
本文主要介绍了Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
这篇文章主要介绍了解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue中的数据监听和数据交互案例解析
这篇文章主要介绍了Vue中的数据监听和数据交互案例解析,在文章开头部分先给大家介绍了vue中的数据监听事件$watch，具体代码讲解，大家可以参考下本文
2017-07-07