当前位置: 首页 > news >正文

VUE_vue2/3点击区域外触发方法,点击除某个元素触发监听

Vue2

1、自定义指令

// 自定义指令,用于处理点击外部区域的事件
const clickOutside = {bind(el, binding) {// 在元素上绑定一个点击事件监听器el.clickOutsideEvent = function (event) {// 检查点击事件是否发生在元素的内部if (!(el === event.target || el.contains(event.target))) {// 如果点击事件发生在元素的外部,则触发指令绑定的方法binding.value(event);}};// 在文档上添加点击事件监听器document.addEventListener("click", el.clickOutsideEvent);},unbind(el) {// 在元素上解除点击事件监听器document.removeEventListener("click", el.clickOutsideEvent);},
}

2、注册自定义指令

export default{directives: {"click-outside": clickOutside, // 注册自定义指令},
}

示例

<template><div class="container"><div v-click-outside="handleBlur">当点击该元素以外的地方时,将触发handleBlur方法</div></div>
</template>
<script>
// 自定义指令,用于处理点击外部区域的事件
const clickOutside = {bind(el, binding) {// 在元素上绑定一个点击事件监听器el.clickOutsideEvent = function (event) {// 检查点击事件是否发生在元素的内部if (!(el === event.target || el.contains(event.target))) {// 如果点击事件发生在元素的外部,则触发指令绑定的方法,将点击的event数据传过去binding.value(event);}};// 在文档上添加点击事件监听器document.addEventListener("click", el.clickOutsideEvent);},unbind(el) {// 在元素上解除点击事件监听器document.removeEventListener("click", el.clickOutsideEvent);},
};
export default {directives: {"click-outside": clickOutside, // 注册自定义指令},name: "test",data() {return {};},methods: {//点击其它区域handleBlur(event) {console.log("点击其它区域啦",event);},}
}
</script>

此时,点击绑定该方法外的区域就会触发该方法啦。不用再用原生单独一个个绑定了

Vue3

因为在 Vue 3 的自定义指令中,生命周期钩子函数的命名和用法已经发生了变化。Vue 3 引入了新的生命周期钩子函数,取代了 Vue 2 中的 bind 和 unbind,所以自定义指令部分v3和v2的写法不一样。下面是v3的自定义指令部分,和v3的整体代码。

当前示例为选项式api,组合式api方式相同

1、自定义指令

// 自定义指令,用于处理点击外部区域的事件
const clickOutside = {beforeMount(el, binding) {// 在元素上绑定一个事件监听器el.clickOutsideEvent = function (event) {// 判断点击事件是否发生在元素外部if (!(el === event.target || el.contains(event.target))) {// 如果是外部点击,则执行绑定的函数binding.value(event);}};// 在全局添加点击事件监听器document.addEventListener("click", el.clickOutsideEvent);},unmounted(el) {// 在组件销毁前,移除事件监听器以避免内存泄漏document.removeEventListener("click", el.clickOutsideEvent);},
}

2、注册自定义指令

export default{directives: {"click-outside": clickOutside, // 注册自定义指令},
}

示例

<template><div class="container"><div v-click-outside="handleBlur">当点击该元素以外的地方时,将触发handleBlur方法</div></div>
</template><script>
// 自定义指令,用于处理点击外部区域的事件
const clickOutside = {beforeMount(el, binding) {// 在元素上绑定一个事件监听器el.clickOutsideEvent = function (event) {// 判断点击事件是否发生在元素外部if (!(el === event.target || el.contains(event.target))) {// 如果是外部点击,则执行绑定的函数binding.value(event);}};// 在全局添加点击事件监听器document.addEventListener("click", el.clickOutsideEvent);},unmounted(el) {// 在组件销毁前,移除事件监听器以避免内存泄漏document.removeEventListener("click", el.clickOutsideEvent);},
}
export default {directives: {"click-outside": clickOutside, // 注册自定义指令},name: "test",data() {return {};},methods: {//点击其它区域handleBlur(event) {console.log("点击其它区域啦", event);},},
}
</script>

相关文章:

VUE_vue2/3点击区域外触发方法,点击除某个元素触发监听

Vue2 1、自定义指令 // 自定义指令&#xff0c;用于处理点击外部区域的事件 const clickOutside {bind(el, binding) {// 在元素上绑定一个点击事件监听器el.clickOutsideEvent function (event) {// 检查点击事件是否发生在元素的内部if (!(el event.target || el.contai…...

SpringCloud(20)之Skywalking Agent原理剖析

一、Agent原理剖析 使用Skywalking的时候&#xff0c;并没有修改程序中任何一行 Java 代码&#xff0c;这里便使用到了 Java Agent 技术&#xff0c;我 们接下来展开对Java Agent 技术的学习。 1.1 Java Agent Java Agent 是从 JDK1.5 开始引入的&#xff0c;算是一个比较老的…...

容器(0)-DOCKERFILE-安装-常用命令-部署-迁移备份-仓库

1.安装 启动 systemclt start docker //启动 systemctl status docker //状态 docker info systemclt stop docker systemctl status docker systemctl enable docker //开机启动 2.常用命令 镜像查看 docker images 镜像查看 docker status 镜像拉取 docker pull centos:…...

低功耗DC-DC电压调整器IU5528D

IU5528D是一款超微小型,超低功耗,高效率,升降压一体DC-DC调整器。适用于双节,三节干电池或者单节锂电池的应用场景。可以有效的延长电池的使用时间。IU5528D由电流模PWM控制环路&#xff0c;误差放大器&#xff0c;比较器和功率开关等模块组成。该芯片可在较宽负载范围内高效稳…...

【备战蓝桥杯系列】单源最短路径Dijkstra算法模板

Dijkstra算法模板 蓝桥杯中也是会考到图论最短路的&#xff0c;一旦考到&#xff0c;基本是不会太难的&#xff0c;只要知道板子就基本能拿分了。 两个板子如下 朴素Dijkstra算法 适应情况&#xff1a;稠密图&#xff0c;正权边 时间复杂度 O(n^2 m) int dijkst(){memse…...

嵌入式系统中端口号的理解与分析

每当看到有人的简历上写着熟悉 tcp/ip, http 等协议时, 我就忍不住问问他们: 你给我说说, 端口是啥吧! 可惜, 很少有人能说得让人满意... 所以这次就来谈谈端口(port), 这个熟悉的陌生人. 在此过程中, 还会谈谈间接层, naming service 等概念, IoC, 依赖倒置等原则以及 TCP 协议…...

3.自定义工程目录配置CMakeLists

问题背景 熟悉stm32keil开发的都知道&#xff0c;我们在编写不同的外设时&#xff0c;通常都会单独编写一个app文件夹或者是user文件夹之类的来存放不同外设功能的源文件和头文件。 在前面一节2.构建第一个工程并烧录到ESP32开发板-CSDN博客中&#xff0c;我们是使用了一个乐鑫…...

Vue3.0里为什么要用 Proxy API 替代 defineProperty API

一、Object.defineProperty 定义&#xff1a;Object.defineProperty() 方法会直接在一个对象上定义一个新属性&#xff0c;或者修改一个对象的现有属性&#xff0c;并返回此对象 为什么能实现响应式 通过defineProperty 两个属性&#xff0c;get及set get 属性的 getter 函…...

c++初阶------类和对象(下)

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…...

PMP考试:如何高效学习PMBOK?

PMBOK&#xff08;项目管理知识体系指南&#xff09;是PMP考试的核心教材&#xff0c;学习PMBOK对于备考PMP考试至关重要。那么我将分享一些高效学习PMBOK的方法和技巧&#xff0c;帮助同学们更好地掌握项目管理知识。 一、制定学习计划 在学习PMBOK之前&#xff0c;制定一个详…...

个人博客网站前端页面的实现

博客网站前端页面的实现 博客登录页 相关代码 login.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...

Kotlin Retrofit 网络请求

一、添加依赖&#xff1a; //Retrofit 网络请求implementation("com.squareup.retrofit2:retrofit:2.3.0")implementation("com.squareup.retrofit2:converter-gson:2.3.0")//json转换 二、创建单例类&#xff1a; package com.example.buju.httpimport …...

pyside6 pytq PyDracula QVideoWidget视频只有声音没有画面

解决方案&#xff1a; 先不使用框架&#xff0c;纯pyside6代码&#xff0c;如果添加视频有画面有声音&#xff0c;那可以排除是硬件问题&#xff0c;如果没有画面只有声音&#xff0c;可能是视频解码器无法解码&#xff0c;换个格式的视频文件如果只有使用PyDracula 出问题&am…...

Python爬网页,不确定网页的编码,不需要用第三方库

Python爬网页&#xff0c;不确定网页的编码&#xff0c;不需要用第三方库&#xff0c;自己写个判断&#xff0c;乱拳打死老师傅 detect试了&#xff0c;不好用 apparent_encoding试了&#xff0c;不好用 encoding试了&#xff0c;不好用 headers里get试了&#xff0c;不好用…...

Web测试的基础流程(外加测试过程需要的注意5点)

前言 在Web工程过程中&#xff0c;基于Web系统的测试、确认和验收是一项重要而富有挑战性的工作。基于Web的系统测试与传统的软件测试不同&#xff0c;它不但需要检查和验证是否按照设计的要求运行&#xff0c;而且还要测试系统在不同用户的浏览器端的显示是否合适。 重要的是…...

项目解决方案:视频监控接入和录像系统设计方案(下)

目 录 1.概述 2. 建设目标及需求 2.1建设总目标 2.2 需求描述 ​2.3 需求分析 3.设计依据与设计原则 3.1设计依据 3.2 设计原则 4.建设方案设计 4.1系统方案设计 4.2组网说明 5.产品介绍 5.1视频监控综合资源管理平台介绍 5.2视频录像服务器和存储 5.2.…...

Python爬虫-使用Prefect框架实现一个可视化爬虫项目

前言 本文是该专栏的第19篇,后面会持续分享python爬虫干货知识,记得关注。 相信有的同学,在处理爬虫项目的时候,有时也会需要你将爬虫项目进行一个可视化展示,方便管理者能及时详细的了解当前爬虫任务的执行进度以及执行情况,甚至需要做一个爬虫监控预警的可视化任务。 …...

[hive面试真题]-基础理论篇

hive的工作流程 hive中分区表,分桶表 工作中hive分区表的应用示例 发现hive分区中的数据不对怎么处理 hive出现code 1 2 3 什么原因 ,怎么处理 工作中hive常见的文件格式 .压缩格式 工作时常用的hive函数 谈谈对窗口函数的理解 hive中如果出现数据倾斜 ,怎么发现 ,怎么…...

【其他】sd卡的照片在相机上能看到在电脑上却看不到

sd卡的照片在相机上能看到在电脑上却看不到 前情提要&#xff1a;太长不看版解决办法&#xff1a;思路&#xff1a;一、首先考虑恢复数据二、 解决文件后缀是exe的问题 前情提要&#xff1a; 在相机里可以看到照片和视频&#xff0c;但是SD卡通过读卡器插入电脑看不到&#x…...

Linux 之六:系统性能监控和挂载

系统性能 Linux系统中&#xff0c;有许多命令用于监测和分析性能指标。以下是一些常用的Linux性能分析命令&#xff1a; top&#xff1a;实时查看并监控CPU、内存以及各个进程的资源占用情况。htop&#xff08;需要安装&#xff09;&#xff1a;一个增强版的 top 命令&#x…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...