vue自定义防抖指令

main.js中

Vue.directive('throttle', {bind: (el, binding) => {let throttleTime = binding.value; // 防抖时间if (!throttleTime) { // 用户若不设置防抖时间,则默认2sthrottleTime = 2000;}let cbFun;el.addEventListener('click', event => {if (!cbFun) { // 第一次执行cbFun = setTimeout(() => {cbFun = null;}, throttleTime);} else {event && event.stopImmediatePropagation();}}, true);},
});

使用

	<div  @click="sayhello" v-throttle>提交</div>

实现效果,控制台2秒输出一次

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

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

相关文章

apifox的使用以及和idea集成

apifox 简介 Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台&#xff0c;定位 Postman Swagger Mock JMeter&#xff0c;由此可见apifox集功能于一身&#xff0c;极大的提升了我们开发的效率&#xff0c;不用再为postman网络连接失败而发愁&…

节能减排 | AIRIOT智慧工厂节能管理解决方案

工厂作为高能耗的生产型企业&#xff0c;降低能耗和提升资源利用率方面就显得很重要&#xff0c;对实施国家倡导的节能降耗、绿色发展有着很大程度上的必要性。然而&#xff0c;工厂能源管理从传统手段向智能化升级转型的过程中&#xff0c;企业也不可避免的面临一些痛点和挑战…

优思学院|八大浪费深度剖析

在工作流程中消除浪费是精益思想的目标。在深入探讨八大浪费之前&#xff0c;了解浪费的定义至关重要。浪费是指工作流程中的任何行动或步骤&#xff0c;这些行动或步骤不为客户增加价值。换句话说&#xff0c;浪费是客户不愿意为其付费的任何过程。 最初的七大浪费&#xff0…

Gradle基础

文章目录 Gradle 项目目录结构Gradle 创建第一个项目Gradle 中的常用指令修改maven 下载源Wrapper 包装器GradleWrapper 的执行流程&#xff1a; 在 idea 中创建普通java 工程 Gradle 项目目录结构 radle 项目默认目录结构和Maven 项目的目录结构一致,都是基于约定大于配置【C…

js的BoM事件(二)

js的BoM事件&#xff08;二&#xff09;&#xff0c;上一篇的补充 一.alert,confirm二.prompt三.open四.close 一.alert,confirm 实例&#xff1a; alert(hi); confirm(message);二.prompt <body><button ></button><script>var btndocument.querySe…

git基础

Git 版本控制 什么是版本控制 版本控制是一种记录一个或若干文件内容变化&#xff0c;以便将来查阅特定版本修订情况的系统。 除了项目源代码&#xff0c;你可以对任何类型的文件进行版本控制。 为什么要版本控制 有了它你就可以将某个文件回溯到之前的状态&#xff0c;甚…

汇编实现点灯实验

.text .global _start _start: 设置GPIOF寄存器的时钟使能LDR R0,0X50000A28LDR R1,[R0]ORR R1,R1,#(0x1<<5)STR R1,[R0]设置GPIOE寄存器的时钟使能LDR R0,0X50000A28LDR R1,[R0] 从r0为起始地址的4字节数据取出放在R1ORR R1,R1,#(0x1<<4) 第4位设置为1STR R1,[…

[ROS2系列] ubuntu 20.04测试rtabmap

目录 背景&#xff1a; 一、配置 turtlebot3 二、安装RTAB-Map ROS2包&#xff1a; 三、启动 Turtlebot3 模拟器&#xff1a; 四、启动 RTAB 地图&#xff1a; 五、启动导航&#xff08;nav2_bringup应安装软件包&#xff09;&#xff1a; 背景&#xff1a; 1、设备&…

什么是国密证书?

国密证书是指中国自主研发的密码算法和加密技术所生成的数字证书。它是为了保护国家信息安全而开发的一种电子证书标准。 国密证书采用了国际上通用的X.509v3标准&#xff0c;但具有自己独特的密码算法和密钥长度。这些算法和密钥长度在国际上被广泛接受并认可&#xff0c;同时…

ansible 调研

参考&#xff1a;自动化运维工具——ansible详解&#xff08;一&#xff09; - 珂儿吖 - 博客园 (cnblogs.com) ansible是新出现的自动化运维工具&#xff0c;基于Python开发&#xff0c;集合了众多运维工具&#xff08;puppet、chef、func、fabric&#xff09;的优点&#xf…

Jetson Orin NX 开发指南(3): 安装 ROS 系统

一、前言 由于本专栏主要介绍如何将 Jetson Orin NX 作为自主无人机的机载电脑&#xff0c;因此需要 ROS 操作系统来实现各个模块的衔接&#xff0c;ROS支持在Linux系统上安装部署&#xff0c;因为ROS与Ubuntu兼容性最好&#xff0c;使用它的首选开发平台是Ubuntu&#xff0c;…

GitHub基础

GitHUb快速入门教程&#xff1a;GitHub - skills/introduction-to-github: Get started using GitHub in less than an hour. 其实&#xff0c;这是一系列Github官方提供的互动式教程&#xff1a;GitHub Skills 官方文档&#xff1a;Hello World - GitHub 文档 1、仓库是什么意…

windows cmd下查看环境变量的信息

在windows cmd窗口下&#xff0c;怎么查看环境变量的值&#xff1f; 直接输入set命令然后回车&#xff0c;即可看到所有环境变量的信息&#xff0c;例如&#xff1a; 输入set <变量名>然后回车&#xff0c;可以查看某个环境变量的值&#xff0c;例如set path&#xff1a…

如何限制word文件中部分内容无法编辑

工作中我们经常会用到Word制作一些文件&#xff0c;文件中有一部分内容不想他人编辑&#xff0c;我们可以设置限制编辑&#xff0c;可以对一部分内容设置限制编辑&#xff0c;具体方法如下&#xff1a; 我们将需要将可以编辑的地方选中&#xff0c;然后打开限制编辑功能 然后勾…

Maven 项目模板

目录 什么是 archetype&#xff1f; 使用项目模板 Maven 将询问原型的版本 创建的项目 创建 pom.xml App.java AppTest.java 阿里云工具 Maven 使用 archetype(原型) 来创建自定义的项目结构&#xff0c;形成 Maven 项目模板。 在前面章节我们学到 Maven 使用下面的命…

IDEA工具之debug第三方jar包源码顺序错乱

IDEA工具之debug第三方jar包源码顺序错乱 场景描述原因分析解决方案 场景描述 概述 使用IDEA排查问题时&#xff0c;经常需要debug源码&#xff0c;当F7跟进依赖jar包时&#xff0c;总是出现Decompiled.class file, bytecode version:51.0 (Java 7)&#xff0c;提示Source code…

访问Apache Tomcat的manager页面

配置访问Tomcat manager页面的用户名、密码、角色 Tomcat安装完成后&#xff0c;包含了一个管理应用&#xff0c;默认安装在 <Tomcat安装目录>/webapps/manager 例如&#xff1a; 要使用管理页面的功能&#xff0c;需要在conf/tomcat-users.xml文件中配置用户、密码及…

c#-特殊的集合

位数组 可观察的集合 private ObservableCollection<string> strList new ObservableCollection<string>();// Start is called before the first frame updatevoid Start(){strList.CollectionChanged Change;strList.Add("ssss");strList.Add("…

[鹏城杯 2022]简单的php - 无数字字母RCE(取反)【*】

[鹏城杯 2022]简单的php 一、解题流程二、思考总结 题目代码&#xff1a; <?php show_source(__FILE__);$code $_GET[code];if(strlen($code) > 80 or preg_match(/[A-Za-z0-9]|\|"||\ |,|\.|-|\||\/|\\|<|>|\$|\?|\^|&|\|/is,$code)){die( Hello);}e…

Spark分布式计算原理

一、Spark WordCount运行原理 二、划分Stage 数据本地化 移动计算&#xff0c;而不是移动数据 保证一个Stage内不会发生数据移动 三、Spark Shuffle过程 在分区之间重新分配数据 父RDD中同一分区中的数据按照算子要求重新进入RDD的不同分区中 中间结果写入磁盘 有子RDD拉取数…