Vue自定义防重复点击指令(v-repeatClick)

 !!!Vue防抖节流方法:VUE使用节流和防抖_vue防抖节流_停留的章小鱼的博客-CSDN博客

新建js文件directive.js:

// directive.js
// 防重复点击(指令实现)
//使用: 在需要的按钮中加 v-repeatClick 指令即可 <el-button v-repeatClick @click="clickHandle">保存</el-button>
export default {install(Vue) {Vue.directive('repeatClick', {inserted(el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 1500)}})},})},
}

全局引入main.js文件:

import directive from '@/utils/directive';
Vue.use(directive);

页面使用:

<el-button v-repeatClick @click="clickHandle">保存</el-button>

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

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

相关文章

【websocket - Tornado】简易聊天应用

1、背景 项目测试的过程中需要自己搭建一个webscoket站点,确保此类服务接入后台系统后访问不受影响。python的服务框架常用的有Flask、Django、Tornado,每个框架的侧重点不同,导致使用的场景就会有所差异。 Flask轻量级,采用常规的同步编程方式,需要安装其他模块辅助,主…

逆向时如何找到MingGW(GNU)编译程序的main函数

编译器是MingGW生成的可执行文件的显著特点是, 最终运行ZwContinue后程序就莫名其妙启动了, 也找不到main函数。 为了探究里面究竟怎么回事, 我找到了wrk-v1.2的源码, 其中包含了ZwContinue的实现, 首先先看一下注释, API界面包含了2个参数, 其中让人感兴趣的是PCONTEXT, 这是…

【MySQL】仓储--维护出入库流水、库存,去重数量逻辑修正

系列文章 C#底层库–MySQLBuilder脚本构建类&#xff08;select、insert、update、in、带条件的SQL自动生成&#xff09; 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/129179216 C#底层库–MySQL数据库操作辅助类&#xff08;推荐阅读&#xff0…

使用kickstart和anaconda自动化安装centos系统

使用kickstart和anaconda自动化安装centos系统 使用kickstart和anaconda自动化安装centos系统 anaconda 介绍 kickstart 介绍 实验过程 前提 1.已经安装好至少两台centos系统 2.需要实现自动安装的系统的光盘镜像 3.已安装的系统之间可以通讯(比如处于VMware中的NAT网络的…

数据结构【第3章】——线性表

线性表的定义 线性表&#xff1a;零个或多个数据元素的有限序列。 1&#xff09;线性表是一个序列。即元素之间是有顺序的&#xff0c;若元素存在多个&#xff0c;则第一个元素无前驱&#xff0c;最后一个元素无后继&#xff0c;其他每个元素都有且只有一个前驱和后继。 2&a…

GitHub上删除项目后,IDEA分享项目到GitHub提示Remote is already on GitHub

文章目录 一、错误信息二、解决方法1.删除GitHub上的项目2.找到项目里的.git隐藏文件3.找到config文件4.打开config文件&#xff0c;删除[remote "git-test"]及下面两行内容5.继续使用IDEA分享项目到GitHub即可 一、错误信息 二、解决方法 1.删除GitHub上的项目 2.…

MacBook Pro 16 M1 Max 升级 macOS Ventura 13.5 兼容测评

今天给大家带来了 MacBook Pro 16 M1 Max 升级 macOS Ventura 13.5 兼容 100 挑战赛 的视频&#xff0c;现在充电头再以文章的形式呈现给大家&#xff0c;让大家更清楚、直白的了解这款笔记本在升级系统后的兼容性如何。 MacBook Pro 16 M1 Max 配置了 140W 的 MagSafe 充电口&…

HCIP-Cloud Service V3.0 真题和机构资料

通过认证验证的能力 具备传统企业应用架构和云原生架构设计上云的能力 建议掌握的知识 对IT相关技术有基本的了解&#xff1b;具备一定的公有云服务基础知识&#xff1b;对云计算、网络、存储、数据库等知识有一定的了解&#xff0c;具备Linux操作系统的基础知识 机构的考试大…

如何创建优雅的对象

在Java中&#xff0c;优雅地创建对象可以通过几种方式来实现。以下是一些常用的优雅创建对象的方法&#xff1a; 使用构造方法&#xff1a; 最常见的创建对象的方式是使用类的构造方法。在Java中&#xff0c;每个类都有一个默认的无参构造方法&#xff0c;如果没有显式定义构…

人工智能如何应对 DevOps 监控和可观测性挑战

自 ChatGPT 横空出世之后&#xff0c;AIGC 已成为不可逆转的时代浪潮。在之前的文章中&#xff0c;我们介绍了DevOps 领域中AI的用例&#xff0c;需要回顾可以点击下方链接。在本篇文章中&#xff0c;我将简单聊聊人工智能&#xff08;AI&#xff09;如何通过分析日志和指标来预…

基于Matlab实现图像融合技术(附上多个仿真源码+数据)

图像融合技术是一种将多幅图像融合为一幅图像的方法&#xff0c;使得这幅融合图像包含原始图像的所有信息。近年来&#xff0c;图像融合技术已经广泛应用于图像分割、变换和裁剪等领域。本文将介绍如何使用Matlab实现图像融合技术。 实现步骤 首先&#xff0c;我们需要了解图…

C#实现int类型和字节流的相互在转化

通过TCP协议进行数据传输时&#xff0c;需要将所有传输的内容转为字节流&#xff0c;这里就用到了将int型的数据转为字节流的。代码如下&#xff1a; public static byte[] BytesConvertToInt(int vel) {byte[] hex new byte[4];hex[3] (byte)(vel >> 24) & 0xff)…

【机器学习】Cost Function for Logistic Regression

Cost Function for Logistic Regression 1. 平方差能否用于逻辑回归&#xff1f;2. 逻辑损失函数loss3. 损失函数cost附录 导入所需的库 import numpy as np %matplotlib widget import matplotlib.pyplot as plt from plt_logistic_loss import plt_logistic_cost, plt_two_…

GD32F103VE睡眠与唤醒

GD32F103VE睡眠与唤醒&#xff0c;兆易官网给的程序没有测试。等测试后&#xff0c;才发现有问题。 现修改&#xff0c;测试如下&#xff1a; #include "SleepMode.h" #include "delay.h"u8 WFE_CMD_EnterSleepModeFlag;void Enter_DeepSleepMode(void);…

github国内镜像站点。解决assets转圈加载不出来的问题

github镜像站 https://hub.nuaa.cf/ https://gitclone.com/ 下载加速 https://gh.api.99988866.xyz/ https://ghproxy.com/ https://github.ur1.fun/ assets转圈加载不出来 f12打开开发者工具&#xff0c;根据前面的loadinglaze&#xff0c;找到这个网址 可以直接看到assets…

【使用 DSP 滤波器加速速度和位移】使用信号处理算法过滤加速度数据并将其转换为速度和位移研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【计算机网络】数据链路层

文章目录 1. 数据链路层1.1 数据链路层简介1.2 数据链路层做了什么 2. 以太网协议2.1 以太网2.2 以太网帧的格式2.3 MAC地址2.4 MTU 3. 数据跨网络传输的整体过程4. ARP协议4.1 认识ARP协议4.2 ARP协议的格式4.3 ARP协议的工作流程 1. 数据链路层 1.1 数据链路层简介 数据链路…

MySql之索引

MySql之索引 1.索引概述 MySql官方对索引的定义为&#xff1a;索引是帮助MySql高效获取数据的数据结构。在数据之外&#xff0c;数据库系统还维护着满足特定查找算法的数据结构&#xff0c;这些数据结构以某种方式引用数据&#xff0c;这样就可以在这些数据结构上实现高级查找…

xiaoweirobot.chat

目录 1 xiaoweirobot.chat 1.1 引用文件 1.2 HttpGetDataListener 1.2.1 // 语音云参数 xiaoweirobot.chat 引用文件package com.shrimp.xiaoweirobot.chat; import java.io.UnsupportedEncodingExcep

初识网络(JavaEE初阶系列9)

目录 前言&#xff1a; 1.网络的发展史 1.1独立模式 1.2网络互联 1.3局域网LAN 1.4广域网WAN 2.网络通信基础 2.1IP地址 2.2端口号 3.认识协议 3.1协议分层 3.2分层的作用 3.3TCP/IP五层&#xff08;或四层&#xff09;模型 3.4OSI七层模型 3.5网络设备所在分层 …