vue3 实现自定义指令封装 --- 通俗易懂
1、局部自定义指令
1.1 在<script setup>定义组件内的指令,任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令
<template><div><h3>使用自定义指令</h3><div>########################## start 局部自定义指令</div><div>我是一个input:<input type="text" v-myFocus /></div><div>########################## end 局部自定义指令</div></div>
</template><script setup>
import { ref, reactive } from 'vue'
/*** 1、局部自定义指令, 在模板中启用 v-focus* 在<script setup>定义组件内的指令,任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令* 为了区分下面全局自定义指令 v-focus,这里全局改为v-MyFocus*/
// const vFocus = {
// mounted: (el) => el.focus()
// }
const vMyFocus = {mounted: (el) => el.focus()
}
</script>
效果:
1.2 如果是vue3的options api, 自定义指令需要在directives
选项中注册
<template><input v-focus />
</template>
<script>
export default{setup() {},directives: {// 指令名focus: {// 生命周期mounted(el) {// 处理DOM的逻辑el.focus()},}}
}
</script>
效果:
2、全局自定义指令
2.1 创建文件: src/directives/focus.js
export default function(app) {app.directive('focus', {mounted(el) {console.log('focus指令, mounted')el.focus()},})
}
2.2 创建文件: src/directives/index.js
import registerFocus from './focus' // 获取焦点export default function registerDirectives(app) {registerFocus(app)
}
2.3 main.js中引入
import registerDirectives from './directives/index'const app = createApp(App)
registerDirectives(app)
报警告如下:
index.vue:9 [Vue warn]: Failed to resolve directive: focus
at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
2.4 页面内使用
<div>########################## start 全局自定义指令</div><div>我是一个使用全局自定义指令的input:<input type="password" v-focus /></div><div>########################## end 全局自定义指令</div>
效果:
3、 常用的自定义指令(后面有新的全局自定义指令封装会更新)
3.1 input获取焦点
src/directives/focus.js
export default function(app) {app.directive('focus', {mounted(el) {console.log('focus指令, mounted')el.focus()},})
}
ts写法:
// 获取焦点
export default function(app: any) {
app.directive("focus", {mounted(el: any) {console.log("focus mounted");el.focus();}})
}
3.2 防抖
src/directives/debounce.js
注册那一步和上面focus一样(此处及后面将省略)
// 防抖
export default function (app) {app.directive('debounce', {mounted(el, binding) {console.log('el', el, 'binding', binding);let timerel.addEventListener('click', () => {if (timer) clearTimeout(timer)timer = setTimeout(() => {binding.value()}, 2000)})},})
}
ts写法:
// 防抖
export default function(app: any) {app.directive("debounce", {mounted(el: any, binding: any) {let timer:anyel.addEventListener('click', () => {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {binding.value()}, 1000)})}})
}
使用:
<template><div>我是测试防抖的全局自定义指令,如果在该间隔内再次触发,则重新计时。<button class="btn" v-debounce="testDebounceBtn" >防抖按钮:点击我,2秒后执行一次</button></div>
</template><script setup>/*** 3、防抖自定义指令 --- 全局*/
const testDebounceBtn = () => {console.log('防抖按钮:点击我,2秒内只执行一次')
}
</script>
效果:
点击按钮后2秒后执行,2秒内再次触发点击,将重新计时,重新计时后2秒后才执行。(正常开发时,时间按照实际情况设定,一般设定1秒后执行)
相关文章:

vue3 实现自定义指令封装 --- 通俗易懂
1、局部自定义指令 1.1 在<script setup>定义组件内的指令,任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令 <template><div><h3>使用自定义指令</h3><div>########################## start 局部自定义指令</d…...

5.31.15 使用图像到图像转换和 YOLO 技术对先前的乳房 X 光检查结果中的异常进行早期检测和分类
在本研究中,我们研究了基于 You-Only-Look-Once (YOLO) 架构的端到端融合模型的有效性,该模型可同时检测和分类数字乳房 X 光检查中的可疑乳腺病变。包括四类病例:肿块、钙化、结构扭曲和正常,这些病例来自包含 413 个病例的私人数…...

题解web
1.[LitCTF 2023]Follow me and hack me 1)进入题目环境,提示get传参,post传参 2)看看源码,也没啥 3)直接用hackbar,传入对应参数即可得到FLAG 3)但是扫描出来它后端还有东西&#x…...

在keil5中打开keil4工程的方法
文章目录 1. 打开文件 2. 安装旧版本包 3. 在keil4中打开keil5工程 1. 打开文件 在keil5 MDK的环境下,打开keil4的工程文件,会弹出下图所示的窗口: 参考官网的解释这两个方法分别为: 1. 使用MDK 版本 4 Legacy Pack时&#x…...
【代码随想录算法训练营第37期 第二十四天 | LeetCode77. 组合】
代码随想录算法训练营第37期 第二十四天 | LeetCode77. 组合 一、77. 组合 解题代码C: class Solution { private:vector<vector<int>> result;vector<int> path;void backtracking(int n, int k, int startIndex){if(path.size() k){result.p…...
探索Linux中的`tree`命令:目录结构的可视化利器
探索Linux中的tree命令:目录结构的可视化利器 在Linux系统中,管理文件和目录结构是一项日常任务。当我们需要快速查看目录的层次结构时,tree命令无疑是一个强大而直观的工具。本文将详细介绍tree命令的功能、用法以及一些实用的选项。 一、…...
ES 面试手册
Elasticsearch是什么? Elasticsearch是一个基于Lucene的搜索和分析引擎,它提供了一个分布式、多租户能力的全文搜索引擎,具有HTTP Web界面和无模式JSON文档。 Elasticsearch中的倒排索引是什么? 倒排索引是搜索引擎的核心结构&a…...
Mybatis缓存的生命周期、使用的特殊情况
以下场景均在Spring Boot程序中,并非手动创建SqlSession使用。 在回答这个问题之前,我们先来回顾一下,Mybatis的一级二级缓存是啥。 一级二级缓存 是什么 一级缓存(本地缓存):一级缓存是SqlSession级别的…...
day 37 738.单调递增的数字
738. 单调递增的数字 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时,我们称这个整数是单调递增的。 给定一个整数 n ,返回 小于或等于 n 的最大数字,且数字呈 单调递增 。 示例 1: 输入: n 10 输出: 9示例 2: 输入: n 1234 输…...
【加密与解密】【01】网络安全体系
网络通信OSI模型 物理层(Physical)链路层(DataLink)网络层(Network)传输层(Transport)会话层(Session)表示层(Presentation)应用层&a…...

nvm,node不是内部命令,npm版本不支持问题(曾经安装过nodejs)
nvm安装后nvm -v有效,node指令无效 环境变量配置无问题 推荐方案 下载你需要的node版本 Index of /dist/ (nodejs.org) 下载后解压到你的nvm存储版本的位置 cmd进入切换你的使用版本(此时你的nodejs是从网上下载的,npm文件是存在的&…...
从入门到精通:基础IO
引言 在编程的世界里,文件输入输出(IO)是与操作系统交互的重要方式。无论你是开发应用程序、处理数据,还是管理系统资源,掌握文件IO操作都是必不可少的。本篇博客将带你深入了解C语言中的基础IO操作,从入门…...

网络空间安全数学基础·多项式环与有限域
5.1 多项式环(掌握) 5.2 多项式剩余类环(理解) 5.3 有限域(熟练) 5.1 多项式环 定义:设F是一个域,称是F上的一元多项式. 首项:如果an≠0,则称 a…...

路由器重启真的好吗?多久重启一次更好?
前言 小白前段时间发现自己家的OpenWRT软路由上网特别慢,有时候通话还有点卡顿。 然而有个朋友用的普通路由器也有类似的问题,而且有时候根本上不去网。 解决的办法很简单:重启路由器。 重启路由器? 但路由器重启是真的好吗&a…...

删除目录
自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 删除目录可以通过使用os模块提供的rmdir()函数实现。通过rmdir()函数删除目录时,只有当要删除的目录为空时才起作用。rmdir()函数的基本语…...

HCIP-Datacom-ARST自选题库__BGP/MPLS IP VPN判断【10道题】
1.部署BGP/MPLSIP VPN时,当两个VPN有共同的站点,则该共同站点一定不能与两个VPN其他站点使用重叠的地址空间。 2.如图所示,运营商BGP/MPLSIP VPN骨干网通过LDP构建LSP,若想实现用户X两个站点之间通过BGP/MPLSIP VPN网络互通,则PE1和PE2之间必…...

【Go语言精进之路】构建高效Go程序:掌握变量、常量声明法则与iota在枚举中的奥秘
🔥 个人主页:空白诗 文章目录 引言一、变量1.1 基础知识1.2 包级变量的声明形式深入解析📌 声明并同时显式初始化📌 声明但延迟初始化📌 声明聚类与就近原则 1.3 局部变量的声明形式深入探讨📌 延迟初始化的…...
python记录之bool
在Python中,bool 是一个内置的数据类型,用于表示逻辑值:True 或 False。虽然这个数据类型看起来很简单,但在编程中它扮演着至关重要的角色,特别是在条件语句、循环以及许多其他逻辑操作中。以下是对Python bool 的深入…...

加密经济浪潮:探索Web3对金融体系的颠覆
随着区块链技术的快速发展,加密经济正在成为全球金融领域的一股新的浪潮。而Web3作为下一代互联网的代表,以其去中心化、可编程的特性,正深刻影响着传统金融体系的格局和运作方式。本文将深入探讨加密经济对金融体系的颠覆,探索We…...

list的简单模拟实现
文章目录 目录 文章目录 前言 一、使用list时的注意事项 1.list不支持std库中的sort排序 2.去重操作 3.splice拼接 二、list的接口实现 1.源码中的节点 2.源码中的构造函数 3.哨兵位头节点 4.尾插和头插 5.迭代器* 5.1 迭代器中的operator和-- 5.2其他迭代器中的接口 5.3迭代器…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...

网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...

.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...

前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...

视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...