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

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>定义组件内的指令&#xff0c;任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令 <template><div><h3>使用自定义指令</h3><div>########################## start 局部自定义指令</d…...

5.31.15 使用图像到图像转换和 YOLO 技术对先前的乳房 X 光检查结果中的异常进行早期检测和分类

在本研究中&#xff0c;我们研究了基于 You-Only-Look-Once (YOLO) 架构的端到端融合模型的有效性&#xff0c;该模型可同时检测和分类数字乳房 X 光检查中的可疑乳腺病变。包括四类病例&#xff1a;肿块、钙化、结构扭曲和正常&#xff0c;这些病例来自包含 413 个病例的私人数…...

题解web

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

在keil5中打开keil4工程的方法

文章目录 1. 打开文件 2. 安装旧版本包 3. 在keil4中打开keil5工程 1. 打开文件 在keil5 MDK的环境下&#xff0c;打开keil4的工程文件&#xff0c;会弹出下图所示的窗口&#xff1a; 参考官网的解释这两个方法分别为&#xff1a; 1. 使用MDK 版本 4 Legacy Pack时&#x…...

【代码随想录算法训练营第37期 第二十四天 | LeetCode77. 组合】

代码随想录算法训练营第37期 第二十四天 | LeetCode77. 组合 一、77. 组合 解题代码C&#xff1a; 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命令&#xff1a;目录结构的可视化利器 在Linux系统中&#xff0c;管理文件和目录结构是一项日常任务。当我们需要快速查看目录的层次结构时&#xff0c;tree命令无疑是一个强大而直观的工具。本文将详细介绍tree命令的功能、用法以及一些实用的选项。 一、…...

ES 面试手册

Elasticsearch是什么&#xff1f; Elasticsearch是一个基于Lucene的搜索和分析引擎&#xff0c;它提供了一个分布式、多租户能力的全文搜索引擎&#xff0c;具有HTTP Web界面和无模式JSON文档。 Elasticsearch中的倒排索引是什么&#xff1f; 倒排索引是搜索引擎的核心结构&a…...

Mybatis缓存的生命周期、使用的特殊情况

以下场景均在Spring Boot程序中&#xff0c;并非手动创建SqlSession使用。 在回答这个问题之前&#xff0c;我们先来回顾一下&#xff0c;Mybatis的一级二级缓存是啥。 一级二级缓存 是什么 一级缓存&#xff08;本地缓存&#xff09;&#xff1a;一级缓存是SqlSession级别的…...

day 37 738.单调递增的数字

738. 单调递增的数字 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递增 。 示例 1: 输入: n 10 输出: 9示例 2: 输入: n 1234 输…...

【加密与解密】【01】网络安全体系

网络通信OSI模型 物理层&#xff08;Physical&#xff09;链路层&#xff08;DataLink&#xff09;网络层&#xff08;Network&#xff09;传输层&#xff08;Transport&#xff09;会话层&#xff08;Session&#xff09;表示层&#xff08;Presentation&#xff09;应用层&a…...

nvm,node不是内部命令,npm版本不支持问题(曾经安装过nodejs)

nvm安装后nvm -v有效&#xff0c;node指令无效 环境变量配置无问题 推荐方案 下载你需要的node版本 Index of /dist/ (nodejs.org) 下载后解压到你的nvm存储版本的位置 cmd进入切换你的使用版本&#xff08;此时你的nodejs是从网上下载的&#xff0c;npm文件是存在的&…...

从入门到精通:基础IO

引言 在编程的世界里&#xff0c;文件输入输出&#xff08;IO&#xff09;是与操作系统交互的重要方式。无论你是开发应用程序、处理数据&#xff0c;还是管理系统资源&#xff0c;掌握文件IO操作都是必不可少的。本篇博客将带你深入了解C语言中的基础IO操作&#xff0c;从入门…...

网络空间安全数学基础·多项式环与有限域

5.1 多项式环&#xff08;掌握&#xff09; 5.2 多项式剩余类环&#xff08;理解&#xff09; 5.3 有限域&#xff08;熟练&#xff09; 5.1 多项式环 定义&#xff1a;设F是一个域&#xff0c;称是F上的一元多项式&#xff0e; 首项&#xff1a;如果an≠0&#xff0c;则称 a…...

路由器重启真的好吗?多久重启一次更好?

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

删除目录

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

HCIP-Datacom-ARST自选题库__BGP/MPLS IP VPN判断【10道题】

1.部署BGP/MPLSIP VPN时,当两个VPN有共同的站点,则该共同站点一定不能与两个VPN其他站点使用重叠的地址空间。 2.如图所示&#xff0c;运营商BGP/MPLSIP VPN骨干网通过LDP构建LSP&#xff0c;若想实现用户X两个站点之间通过BGP/MPLSIP VPN网络互通&#xff0c;则PE1和PE2之间必…...

【Go语言精进之路】构建高效Go程序:掌握变量、常量声明法则与iota在枚举中的奥秘

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 引言一、变量1.1 基础知识1.2 包级变量的声明形式深入解析&#x1f4cc; 声明并同时显式初始化&#x1f4cc; 声明但延迟初始化&#x1f4cc; 声明聚类与就近原则 1.3 局部变量的声明形式深入探讨&#x1f4cc; 延迟初始化的…...

python记录之bool

在Python中&#xff0c;bool 是一个内置的数据类型&#xff0c;用于表示逻辑值&#xff1a;True 或 False。虽然这个数据类型看起来很简单&#xff0c;但在编程中它扮演着至关重要的角色&#xff0c;特别是在条件语句、循环以及许多其他逻辑操作中。以下是对Python bool 的深入…...

加密经济浪潮:探索Web3对金融体系的颠覆

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

list的简单模拟实现

文章目录 目录 文章目录 前言 一、使用list时的注意事项 1.list不支持std库中的sort排序 2.去重操作 3.splice拼接 二、list的接口实现 1.源码中的节点 2.源码中的构造函数 3.哨兵位头节点 4.尾插和头插 5.迭代器* 5.1 迭代器中的operator和-- 5.2其他迭代器中的接口 5.3迭代器…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...