防止多次点击,vue的按钮上做简易的防抖节流处理

话不多说,上个视频,看看是不是你要的效果

防抖节流

1.创建一个directive.js

// directive.js
export default {
	install(Vue) {
		// 防重复点击(指令实现)
		Vue.directive('repeatClick', {
			inserted(el, binding) {
				el.addEventListener('click', () => {
					if (!el.disabled) {
						el.disabled = true
						setTimeout(() => {
							el.disabled = false
						}, binding.value || 1000)
					}
				})
			}
		})
	}
}

2.引入到main.js

import directive from './utils/directive.js'; //防止多次点击事件

Vue.use(directive);

3.使用:

<template slot-scope="scope">
          <el-button  v-repeatClick='3000' type="primary" size="mini" 
 @click="sub(scope.row)">插入</el-button>
                            </template>

注意,这个只能放在按钮上

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Stable Diffusion】AI绘画美女,搞副业,赚钱真香!(内附高质量美女提示词)

前言 今天就直接上干货&#xff0c;给铁子们上一些生成高质量美女的提示词&#xff0c;每一种美女类型都附有魔法咒语&#xff0c;可应用于midjourney和stablediffusion&#xff0c;直接复制即可。 话不多说&#xff0c;直接上图&#xff0c;上提示词&#xff0c;请欣赏&…

三大工作流引擎技术Activiti、Flowable、Camunda选型指南

文章目录 前言1 流程引擎发展历程2 流程引擎主要概念BPM (Business Process Management)BPMN (Business Process Model and Notation)CMMN (Case Management Model and Notation)DMN (Decision Model and Notation)事件&#xff08;Event&#xff09;顺序流&#xff08;Sequenc…

控制台扫雷(C语言实现)

目录 博文目的实现思路项目创建文件解释 具体实现判断玩家进行游戏还是退出扫雷棋盘的确定地图初始化埋雷玩家扫雷的实现雷判断函数 源码game.cgame.h扫雷.c 博文目的 相信不少人都学习了c语言的函数&#xff0c;循环&#xff0c;分支那我们就可以写一个控制台的扫雷小游戏来检…

【AI落地应用实战】如何让扫描工具更会思考——智能高清滤镜2.0实战测评

一、引言 在这个信息爆炸的数字化时代&#xff0c;扫描工具已经成为我们日常工作和学习中不可或缺的助手。最近&#xff0c;扫描全能王推出了革命性的“智能高清滤镜2.0”&#xff0c;本次更新后&#xff0c;智能高清滤镜能够智能识别并优化扫描过程中的各种问题。无论是光线不…

【乐吾乐2D可视化组态编辑器】图元外观编辑

1 节点的外观样式 角度&#xff1a;设置尖角与圆角&#xff0c;值的范围&#xff1a;0~1 旋转&#xff1a;设置图形的旋转角度 进度&#xff1a;任意封闭图形&#xff0c;都可以当进度条&#xff1a;矩形、圆、svg、封闭连线、或其他任意封闭图形&#xff0c;值的范围&#…

强化学习:值函数近似【Deep Q-Network,DQN,Deep Q-learning】

强化学习笔记 主要基于b站西湖大学赵世钰老师的【强化学习的数学原理】课程&#xff0c;个人觉得赵老师的课件深入浅出&#xff0c;很适合入门. 第一章 强化学习基本概念 第二章 贝尔曼方程 第三章 贝尔曼最优方程 第四章 值迭代和策略迭代 第五章 强化学习实例分析:GridWorld…

【升压电子烟方案】DC-DC电源升压恒压芯片FP6277+全极低功耗霍尔MH251在电子烟中的应用

电子烟是一种新型烟草制品&#xff0c;由于其健康、环保和口感多样化的特点&#xff0c;逐渐受到了消费者的青睐。 升压芯片作为电子烟的核心组件之一&#xff0c;主要作用是将输入的电压升高至合适的工作电压&#xff0c;霍尔传感器控制电子烟的使用状态&#xff0c;以确保电子…

springboot系列七: Lombok注解,Spring Initializr,yaml语法

老韩学生 LombokLombok介绍Lombok常用注解Lombok应用实例代码实现idea安装lombok插件 Spring InitializrSpring Initializr介绍Spring Initializr使用演示需求说明方式1: IDEA创建方式2: start.spring.io创建 注意事项和说明 yaml语法yaml介绍使用文档yaml基本语法数据类型字面…

鸿蒙开发HarmonyOS NEXT (二) 熟悉ArkUI

一、构造函数 构造一个商品类Item&#xff0c;然后利用foreach函数循环渲染 class Item {name: stringimage: ResourceStrprice: numberdiscount: numberconstructor(name: string, image: ResourceStr, price: number, discount: number 0) {this.name name;this.image ima…

自动化测试小技巧之Airtest-Selenium和Excel的无缝协作

一、前言 之前在问卷以及Q群上有同学有提出过能否将网页上的一些数据通过Airtest去导出生成一份Excel&#xff0c;那么我们今天一起讨论一下&#xff0c;我们应该如何去实现&#xff0c;以及当我们获取的数据类型不同的时候&#xff0c;获取的方式该怎么随之调整&#xff1f; …

MySQL InnoDB支持几种行格式

数据库表的行格式决定了一行数据是如何进行物理存储的&#xff0c;进而影响查询和DML操作的性能。 在InnoDB中&#xff0c;常见的行格式有4种&#xff1a; 1、COMPACT&#xff1a;是MySQL 5.0之前的默认格式&#xff0c;除了保存字段值外&#xff0c;还会利用空值列表保存null…

如何使用git将本地文件夹提交至云效代码库

目录 引言 一、准备工作 二、配置Git用户信息 三、克隆代码库到本地 四、添加文件至Git仓库 五、推送更改至云效代码库 六、如何删除云效文件 七、注意事项 八、总结 引言 随着团队协作开发的日益普及&#xff0c;代码版本控制系统&#xff08;VCS&#xff09;如Git已…

java+mysql图书管理系统

完整代码地址 1.运行效果图 2.主要代码 2.1.连接数据库 package com.my.homework.utils;import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException;public class JDBCUtils {public static Connection getConnection() throws Exception {…

力压GPT-4o!新王Claude 3.5 Sonnet来了,直接免费可用

如今&#xff0c;大模型领域更卷了&#xff01; 前脚 OpenAI 发布 GPT4o&#xff0c;硬控全场&#xff0c;后脚就被最大的竞争对手 Anthropic 超越了。 刚刚&#xff0c;Anthropic 发布了全新大模型 Claude 3.5 Sonnet&#xff0c;号称是迄今为止最智能的模型。 据介绍&#x…

CSS|05 继承性与优先级

继承性 一、继承性的特点&#xff1a; 1.外层元素身上的样式会被内层元素所继承 2.如果内层元素与外层元素身上的演示相同时&#xff0c;外层元素的样式会被内层元素所覆盖 二、关于继承性的问题 是不是所有样式都能被继承&#xff1f; 答&#xff1a;并不是所有样式能被继承…

图像处理Python库--图片裁剪、缩放、灰度图、圆角等

图像处理Python库 py-img-processor1. 安装2. 使用(Usage)2.1 运行配置2.2 图像处理处理函数图像处理参数为字符串图像处理参数为JSON 命令行提取图像主色调 py-img-processor Image editor using Python and Pillow. 依赖Pillow开发的Python库&#xff0c;用于图像编辑处理。…

Excel数据恢复,4个技巧挽救重要数据

在数字化时代&#xff0c;Excel表格已经成为我们工作、学习乃至生活中不可或缺的一部分。它们承载着我们的数据、计划、分析和决策&#xff0c;如同一张张承载着智慧与汗水的地图&#xff0c;指引我们前行。然而&#xff0c;当这些宝贵的数据意外丢失或被误删时&#xff0c;我们…

【Linux操作系统】进程地址空间与动态库加载

当系统执行一个依赖动态库的可执行程序时&#xff0c;系统不仅要将该可执行程序加载到内存中还要由加载器将动态库加载到内存中&#xff08;静态库没有&#xff09;&#xff0c;因此必须要让加载器知道该动态库的名称&#xff0c;系统会默认在/lib64路径下查找&#xff0c;解决…

I/O系统

1. I/O接口 接口可以看做两个系统或两个部件之间的交接部分&#xff0c;它既可以是两种硬设备之间的连接电路&#xff0c;也可以是两个软件之间的共同逻辑边界。 I/O接口通常是指主机与I/O设备之间设置的一个硬件电路及其相应的软件控制。 2. 程序查询方式 程序查询方式是一…

深圳比创达|EMC与EMI一站式解决方案:从源头解决,满足您的需求

随着科技的飞速发展&#xff0c;电子产品日益普及&#xff0c;电磁兼容性&#xff08;EMC&#xff09;与电磁干扰&#xff08;EMI&#xff09;问题也逐渐凸显。 一、EMC与EMI的概述 EMC&#xff08;电磁兼容性&#xff09;是指电子设备在共同的电磁环境中能执行各自功能的互不…