自定义指令实现按钮防抖

项目中经常会遇到防抖这个场景,比如,页面滚动事件;输入框自动搜索等。为了方便统一管理,提高项目代码的可维护性。我们可以利用Vue的自定义指令完成这个功能。

自定义指令

生命周期/钩子函数

自定义指令拥有自身的生命周期,如下所示:

created(el,binding,vnode,preNode){}   // 在绑定元素的属性之前 
beforeMounted(el,binding,vnode,preNode) {}  //在被插入到Dom前调用
mounted(el,binding,vnode,preNode){}   //在绑定他的父组件和他所有的子组件都挂载完毕后调用
beforeUpdate(el,binding,vnode,preNode) {} //在绑定的父元素更新前调用
updated(el,binding,vnode,preNode) {}  //在绑定元素的父组件及它的所有子组件都更新完成后调用
beforeUnmount(el,binding,vnode,preNode) {}  //绑定元素的父组件卸载前调用
unmounted(el,binding,vnode,preNode) {} //绑定元素的父组件卸载后调用

生命周的参数

  • el:指令绑定到的元素。可以用于直接操作DOM

  • binding:一个对象包含如下属性。
    value:传递给指令的值。例如在 v-my-directive=“1 + 1” 中,值是 2。
    oldValue:之前的值,仅在 beforeUpdate 和 updated 中可用。无论值是否更改,它都可用。
    arg:传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中,参数是 “foo”。
    modifiers:一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中,修饰符对象是 { foo: true, bar: true }。
    instance:使用该指令的组件实例。
    dir:指令的定义对象。

  • vnode:代表绑定元素的底层 VNode。

  • prevNode:代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

步骤

1. 在项目utils文件夹中新增debounce.js文件

在文件中编写防抖的逻辑代码

export const debounce = {//ES6中对象中的方法可以直接写,不用写属性名mounted(el, binding) {console.log(el, binding)const doHandler = () => {let timer = nullreturn function () {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {binding.value.handler()}, binding.value.delay);}}el.addEventListener('click', doHandler())},
}

2.在utils文件夹下新建directives.js文件

在此文件中引入项目中所有自定义指令,并将它们统一注册。

import {debounce} from './debounce'const directivesObj = {debounce
}const directives = {
//使用Vue的install方法统一注册自定义指令。install(Vue) {Object.keys(directivesObj).forEach(key => {Vue.directive(key,directivesObj[key])})}
}export default directives

3.在main.js中使用指令

import directives from './util/directives'
const app = createApp(App)
console.log(directives)
//使用install方法注册的对象可以通过app.use()来使用
app.use(directives)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/637651.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL Server 数据表模糊查询(like 用法)以及查询函数

文章目录 一、模糊查询(like)二、查询函数 一、模糊查询(like) 在SQL Server Management Studio (SSMS) 中,进行模糊查询主要是通过使用like操作符来实现的。like操作符用于在where语句中搜索列中具有指定模式的数据。…

5G基站节能及数字化管理解决方案

截至2023年10月,我国5G基站总数达321.5万个,占全国通信基站总数的28.1%。然而,随着5G基站数量的快速增长,基站的能耗问题也逐渐日益凸显,基站的用电给运营商带来了巨大的电费开支压力,降低5G基站的能耗成为…

JVM工作原理与实战(二十二):方法区的垃圾回收

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、Java的内存管理和自动垃圾回收 二、方法区的垃圾回收 1.回收条件 2.手动触发垃圾回收 3.方法区的垃圾回收案例 总结 前言 JVM作为Java程序的运行环境,其负责解释和…

面试题总结-分布式总结

Nginx 篇 【1】简述一下什么是Nginx,它有什么优势和功能? Nginx 是高性能的 HTTP 和反向代理的服务器,处理高并发能力是十分强大的,能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数。Nginx主要提供功能有 http服务…

了解Vue中日历插件Fullcalendar

实现效果如下图: 月视图 周视图 日视图 官方文档地址:Vue Component - Docs | FullCalendar 1、安装与FullCalendar相关的依赖项 npm install --save fullcalendar/vue fullcalendar/core fullcalendar/daygrid fullcalendar/timegrid fullcalend…

Python并发与多线程:IO并发(阻塞IO、非阻塞IO、IO多路复用、异步IO)

在Python中,有多种处理并发的方式,其中之一就是使用多线程进行IO并发操作。在IO操作中,有四种常见的方式:阻塞IO、非阻塞IO、IO多路复用和异步IO。 阻塞IO(Blocking IO):当执行一个IO操作时&…

C++将信息输入到文件内

第一步检查文件是否打开&#xff0c;用到头文件&#xff1a; #include <fstream> #include <sstream> 文件打开的函数为 file.isopen() 信息输入到文件应该为 file << "" << value; 注意是file<< 如图 定义file ofstream f…

产品经理学习-产品运营《用户运营策略》

⽤户画像与⽤户运营策略 什么是用户画像 对产品运营而言&#xff0c;用户画像就是对用户的各种特征贴上标签通过这些标签将用户分成不同的用户群体 为用户提供有针对性的服务。 制作用户画像是为了专注和精准 使产品的服务对象更加聚焦&#xff0c;更加专注&#xff1b;根据产…

Rust - 可变引用和悬垂引用

可变引用 在上一篇文章中&#xff0c;我们提到了借用的概念&#xff0c;将获取引用作为函数参数称为 借用&#xff08;borrowing&#xff09;&#xff0c;通常情况下&#xff0c;我们无法修改借来的变量&#xff0c;但是可以通过可变引用实现修改借来的变量。代码示例如下&…

人口问题1

2023年新生儿数量公布&#xff0c;902万人。跟去年比有所下降&#xff0c;但没有各路预测的降那么多。 搜了下历年新生儿数量&#xff0c;建国以来很快上升到2000w&#xff0c;然后遇到了人民公社、三年灾害有些下滑&#xff1b;逐渐克服困难&#xff0c;克服错误&#xff0c;…

SAP S/4HANA 2023 Fully-Activated Appliance 虚拟机版介绍

注&#xff1a;市面上所有在售虚拟机均为拷贝本人所作的虚拟机&#xff0c;存在各种技术问题&#xff0c;请知悉。 SAP S4HANA 2023 FAA版本内置了四个Client&#xff1a; 1、000&#xff1a;SAP初始Client&#xff0c;原则上不能动&#xff1b; 2、100&#xff1a;只激活了US…

NG+WAF实现应用安全访问

一、基本概念 什么是waf&#xff1f; Web应用防火墙&#xff08;waf&#xff09;是通过执行一系列针对HTTP/HTTPS的安全策略来专门为Web应用提供保护的一款产品&#xff0c;WAF是一种工作在应用层的、通过特定的安全策略来专门为Web应用提供安全防护的产品。 什么是ngx_lua_…

SpringMVC数据校验

导包 配置springmvc.xml <bean id"validator" class" org.springframework.validation.beanvalidation.LocalValidatorFactoryBean"><property name"providerClass" value"org.hibernate.validator.HibernateValidator ">…

[AIGC] 深入理解Java并发编程:从入门到进阶

深入理解Java并发编程&#xff1a;从入门到进阶 引言 在计算机领域中&#xff0c;针对多核处理器的高并发需求&#xff0c;Java并发编程成为了一项重要的技能。Java提供了丰富的并发编程工具和API&#xff0c;使得开发者能够有效地利用多核处理器的优势。本文将介绍Java并发编…

App 设计工具中的回调

目录 创建回调函数 回调函数编程 回调输入参数 在回调函数之间共享数据 在多个组件之间共享回调 以编程方式创建和分配回调 在代码中搜索回调 更改回调或断开与回调的连接 删除回调 示例&#xff1a;具有滑块回调的 App 回调是在用户与 App 中的 UI 组件交互时执行的…

5G_系统同步机制(八)

BBU和RRU的同步机制 为什么要做到系统同步 在TDD模式下工作时&#xff0c;为了避免相邻小区之间的干扰&#xff0c;近距离的所有gNB在任何时间点都必须具有相同的传输方向(DL或UL)。这样做的必要条件是在BTS之间同步SFN (System Frame number)和time Slot。此外&#xff0c;由…

SystemC学习笔记(三) - 查看模块的波形

简述 波形在Simulation/Emulation中地位十分重要&#xff0c;尤其是在研发初期&#xff0c;只能通过波形来查看软件hang住的位置。 对于TLM来说&#xff0c;查看波形一般是指查看pvbus上的transaction&#xff0c;而对于SystemC本身来说&#xff0c;查看波形就是使用Gtkwave或…

QT 浏览器组件使用

1. Qt4中使用webkit模块&#xff1b; 2. Qt5 ~Qt5.5使用webkitwidgets模块,使用WebKit作为后端&#xff1b; 3. Qt5.6以上版本使用webenginewidgets模块,使用Chromium作为后端。QT5.6之后开始支持 验证一下webenginewidgets 64位能不能在win7 64位上运行

决策树的分类

概念 决策树是一种树形结构 树中每个内部节点表示一个特征上的判断&#xff0c;每个分支代表一个判断结果的输出&#xff0c;每个叶子节点代表一种分类结果 决策树的建立过程 1.特征选择&#xff1a;选取有较强分类能力的特征。 2.决策树生成&#xff1a;根据选择的特征生…

SQL的五大约束作用、语法、应用场景及举例

SQL的五大约束包括主键约束&#xff08;PRIMARY KEY&#xff09;、唯一性约束&#xff08;UNIQUE&#xff09;、外键约束&#xff08;FOREIGN KEY&#xff09;、非空约束&#xff08;NOT NULL&#xff09;和默认约束&#xff08;DEFAULT&#xff09;。 sql约束的作用&#xff1…