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、自定义指令 // 自定义指令,用于处理点击外部区域的事件 const clickOutside {bind(el, binding) {// 在元素上绑定一个点击事件监听器el.clickOutsideEvent function (event) {// 检查点击事件是否发生在元素的内部if (!(el event.target || el.contai…...
SpringCloud(20)之Skywalking Agent原理剖析
一、Agent原理剖析 使用Skywalking的时候,并没有修改程序中任何一行 Java 代码,这里便使用到了 Java Agent 技术,我 们接下来展开对Java Agent 技术的学习。 1.1 Java Agent Java Agent 是从 JDK1.5 开始引入的,算是一个比较老的…...
容器(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控制环路,误差放大器,比较器和功率开关等模块组成。该芯片可在较宽负载范围内高效稳…...
【备战蓝桥杯系列】单源最短路径Dijkstra算法模板
Dijkstra算法模板 蓝桥杯中也是会考到图论最短路的,一旦考到,基本是不会太难的,只要知道板子就基本能拿分了。 两个板子如下 朴素Dijkstra算法 适应情况:稠密图,正权边 时间复杂度 O(n^2 m) int dijkst(){memse…...
嵌入式系统中端口号的理解与分析
每当看到有人的简历上写着熟悉 tcp/ip, http 等协议时, 我就忍不住问问他们: 你给我说说, 端口是啥吧! 可惜, 很少有人能说得让人满意... 所以这次就来谈谈端口(port), 这个熟悉的陌生人. 在此过程中, 还会谈谈间接层, naming service 等概念, IoC, 依赖倒置等原则以及 TCP 协议…...
3.自定义工程目录配置CMakeLists
问题背景 熟悉stm32keil开发的都知道,我们在编写不同的外设时,通常都会单独编写一个app文件夹或者是user文件夹之类的来存放不同外设功能的源文件和头文件。 在前面一节2.构建第一个工程并烧录到ESP32开发板-CSDN博客中,我们是使用了一个乐鑫…...
Vue3.0里为什么要用 Proxy API 替代 defineProperty API
一、Object.defineProperty 定义:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象 为什么能实现响应式 通过defineProperty 两个属性,get及set get 属性的 getter 函…...
c++初阶------类和对象(下)
作者前言 🎂 ✨✨✨✨✨✨🍧🍧🍧🍧🍧🍧🍧🎂 🎂 作者介绍: 🎂🎂 🎂 🎉🎉🎉…...
PMP考试:如何高效学习PMBOK?
PMBOK(项目管理知识体系指南)是PMP考试的核心教材,学习PMBOK对于备考PMP考试至关重要。那么我将分享一些高效学习PMBOK的方法和技巧,帮助同学们更好地掌握项目管理知识。 一、制定学习计划 在学习PMBOK之前,制定一个详…...
个人博客网站前端页面的实现
博客网站前端页面的实现 博客登录页 相关代码 login.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...
Kotlin Retrofit 网络请求
一、添加依赖: //Retrofit 网络请求implementation("com.squareup.retrofit2:retrofit:2.3.0")implementation("com.squareup.retrofit2:converter-gson:2.3.0")//json转换 二、创建单例类: package com.example.buju.httpimport …...
pyside6 pytq PyDracula QVideoWidget视频只有声音没有画面
解决方案: 先不使用框架,纯pyside6代码,如果添加视频有画面有声音,那可以排除是硬件问题,如果没有画面只有声音,可能是视频解码器无法解码,换个格式的视频文件如果只有使用PyDracula 出问题&am…...
Python爬网页,不确定网页的编码,不需要用第三方库
Python爬网页,不确定网页的编码,不需要用第三方库,自己写个判断,乱拳打死老师傅 detect试了,不好用 apparent_encoding试了,不好用 encoding试了,不好用 headers里get试了,不好用…...
Web测试的基础流程(外加测试过程需要的注意5点)
前言 在Web工程过程中,基于Web系统的测试、确认和验收是一项重要而富有挑战性的工作。基于Web的系统测试与传统的软件测试不同,它不但需要检查和验证是否按照设计的要求运行,而且还要测试系统在不同用户的浏览器端的显示是否合适。 重要的是…...
项目解决方案:视频监控接入和录像系统设计方案(下)
目 录 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卡的照片在相机上能看到在电脑上却看不到 前情提要:太长不看版解决办法:思路:一、首先考虑恢复数据二、 解决文件后缀是exe的问题 前情提要: 在相机里可以看到照片和视频,但是SD卡通过读卡器插入电脑看不到&#x…...
Linux 之六:系统性能监控和挂载
系统性能 Linux系统中,有许多命令用于监测和分析性能指标。以下是一些常用的Linux性能分析命令: top:实时查看并监控CPU、内存以及各个进程的资源占用情况。htop(需要安装):一个增强版的 top 命令&#x…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 :HyperText Transfer Protocol(超文本传输协议) 默认端口 :HTTP 使用 80 端口,HTTPS 使用 443 端口。 请求方法 : GET :用于获取资源,…...
如何配置一个sql server使得其它用户可以通过excel odbc获取数据
要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据,你需要完成以下配置步骤: ✅ 一、在 SQL Server 端配置(服务器设置) 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到:SQL Server 网络配…...
Linux安全加固:从攻防视角构建系统免疫
Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...
