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>

总结

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

您可能感兴趣的文章:

vue2.0 常用的 UI 库实例讲解
这篇文章主要介绍了vue2.0 常用的 UI 库实例讲解，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-12-12
解决vue中props对象中设置多个默认值的问题
props中设置了默认值,但是获取时（获取父页面没有传的属性）打印出来是undefined,所以本文给大家介绍了解决vue中props对象中设置多个默认值的问题,需要的朋友可以参考下
2024-04-04
Vue 电商后台管理项目阶段性总结(推荐)
这篇文章主要介绍了Vue 电商后台管理项目阶段性总结，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-08-08
Element-UI组件实现面包屑导航栏的示例代码
面包屑导航栏是一种用户界面组件,用于展示用户在网站或应用中的路径,它包括了从主页到当前页面的链接序列,有助于用户快速了解和导航至上级页面,本文就来介绍一下Element-UI组件实现面包屑导航栏的示例代码,感兴趣的可以了解一下
2024-09-09
vue3插槽:el-table表头插入tooltip及更换表格背景色方式
这篇文章主要介绍了vue3插槽:el-table表头插入tooltip及更换表格背景色方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
Vue 2源码阅读 Provide Inject 依赖注入详解
这篇文章主要为大家介绍了Vue 2源码阅读 Provide Inject 依赖注入详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue实现下拉框筛选表格数据
这篇文章主要为大家详细介绍了vue实现下拉框筛选表格数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
vue计算属性及函数的选择
这篇文章主要介绍了vue计算属性及函数的选择，文章围绕主题的相关资料展开详细介绍，需要的小伙伴可以参考一下
2022-05-05
vue常用高阶函数及综合实例
这篇文章主要介绍了vue常用高阶函数及综合案例，文章内容讲解的很清晰，有对于这方面感兴趣的同学可以研究下
2021-02-02
使用Vue 实现滑动验证码功能
本文章主要来介绍一下第一个阶段，也就是前端校验的验证码的实现，下面来介绍一下拖动验证码的具体实现。这篇文章主要介绍了利用 Vue 实现滑动验证码,需要的朋友可以参考下
2019-06-06