Vue全局指令防止重复点击(等待请求)

继《vue之全局请求loading》之后,总觉得全局loading有时候不太…友好,所以总想将loading加到被点击的元素上面,于是乎就想到了点击事件与请求方法相关联,本想重写组件的click方法,但是这样对组件的影响太大,所以放弃了,最终想到了Vue全局指令。

一、实现原理

通过全局指令代替组件事件,在全局指令中绑定click事件,当dom被点击时,给dom添加禁用状态,利用闭包等方式获取到绑定的方法,通过await等待方法执行完毕然后去掉禁用;

二、使用

@click替换为v-con-click

<el-button type="primary" icon="el-icon-search" size="mini" v-con-click="handleQuery">搜索</el-button>

三、注意事项

1. 同步和异步回调只能选一种

同步通过await来等待去除禁用,而异步回调则是由自己判断去掉禁用。

同步(没有传参):

handleQuery(e) {console.log(e); // 没有传参时,默认为点击事件this.queryParams.pageNum = 1;await this.getList();
}

异步回调(没有传参):

handleQuery() {console.log(e); // 没有传参,默认为点击事件return (removeDisabled) => {this.queryParams.pageNum = 1;this.getList().then(res => {// 去掉组件禁用removeDisabled();})}
}

2. 异步回调需闭包

因需要回传回调方法,所以需添加一层闭包;

3. 有传参的方法需闭包

因有参数的方法相当于绑定时会自动执行一遍,所以添加闭包,来获取执行代码。

handleQuery(d) {return (removeDisabled) => {this.queryParams.pageNum = 1;this.getList().then(res => {// 去掉组件禁用removeDisabled();})}
}

所以对于有参数的方法异步回调就相当于两次闭包

handleQuery(d) {return (e) => {console.log(e); // 点击事件return (removeDisabled) => {// 去掉组件禁用removeDisabled();}}
}

3. 其他问题

因想法特殊,可能会出现未知问题,目前暂未发现其他问题,如有问题,欢迎即使提出。

四、代码

const conClickDirective = {bind(el, binding, vnode) {el.addEventListener('click', async e => {let hasCb = false;el.classList.add('is-disabled');el.disabled = true;// 这里写点击事件的逻辑if (binding.value instanceof Function) {const res = await binding.value(e);if (res instanceof Function) {const d = res(() => {el.disabled = false;el.classList.remove('is-disabled');})if (!(d instanceof Promise)) {hasCb = true;} else {await d;}}}if (!hasCb) {el.disabled = false;el.classList.remove('is-disabled');}});}
};// 全局注册自定义指令
Vue.directive('con-click', conClickDirective);

五、进阶版

进阶版:《Vue全局事件防止重复点击(等待请求)【进阶版】》

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

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

相关文章

【分享】一道面试题的思考。。。

是一个同学面试时遇见的&#xff0c;他被鄙视了&#xff0c;大家看看自己是否可以过关。 题目如下&#xff1a; 在32位机器上&#xff0c;用你觉得最高效的方法实现memcpy函数。 void*memcpy(void*dest,void*src,unsignedintsize); 大家好好考虑一下这个题 很不容写好的 因…

华为OD机试真题-虚拟游戏理财-2023年OD统一考试(C卷)---Python3--开源

题目&#xff1a; 考察内容&#xff1a; for if max 代码&#xff1a; """ 题目分析&#xff1a;投资额*回报率投资回报 要在可接受范围内选择最优的投资方式获得最大回报最多投资2个理财产品输入&#xff1a; 产品数int; 总投资额int; 总风险int 产品投资…

C++入门学习(三十七)函数分文件编写【DEV】

创建.h后级名的头文件创建.cpp后缀名的源文件在头文件中写函数的声明在源文件中写函数的定义 一、选择文件、新建、项目 二、 选择Empty Project 三、 新建源文件New File 四、贴代码 test.cpp #include <iostream> #include "add.h" using namespace std;i…

《TCP/IP详解 卷一》第4章 地址解析协议ARP

目录 4.1 引言 4.2 一个例子 4.3 ARP缓存 4.4 ARP帧格式 4.5 ARP例子 4.6 ARP缓存超时 4.7 代理ARP 4.8 免费ARP和地址冲突检测 4.9 ARP命令 4.10 使用ARP设置嵌入式设备IPv4地址 4.11 与ARP相关攻击 4.12 总结 4.1 引言 地址解析&#xff1a; IPv4&#xff1a;AR…

Python代码实例调用淘宝封装API接口批量获取淘宝商品详情及描述SKU数据

在Python中获取淘宝商品详情&#xff0c;通常可以通过以下几种方式实现&#xff1a; 1. 使用Taobao Open Platform API&#xff1a;淘宝提供了API接口【注册封装API接口可以免费测试】&#xff0c;允许开发者通过API请求获取商品信息。你可以先注册成为淘宝开发者&#xff0c;…

基于Springboot实现课程评分系统设计和实现

基于java Springboot实现课程评分系统设计和实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取源码…

$nextTick有什么作用?

$nextTick有什么作用&#xff1f; 一、NextTick是什么 为什么要有nexttick 二、使用场景 三、实现原理 $nextTick有什么作用&#xff1f; 一、NextTick是什么 官方对其的定义 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法&#xff0c;获取更…

Linux基础知识——命令行模式下命令的执行

文章目录 Linux基础知识——命令行模式下命令的执行开始执行Linux命令Linux基础命令的操作常用Linux命令行操作按键Linux输出错误信息查看 Linux系统在线帮助--help选项man命令info命令其他有用的文件文档百度搜索 文本编辑器&#xff1a;nanonano启动&#xff01; 正确关机方法…

__proto__和protype的区别

概述&#xff1a; prototype 函数静态属性&#xff0c;非实例属性,所有实例都可以继承它 __proto__ 实例属性&#xff0c;指向实例的原型对象&#xff0c;原型对象包括构造函数和protype属性 替代 现代浏览器中可以使用Object.getPrototypeOf()来替代__proto__来获取原型对象 …

Vue3自定义组件v-model双向绑定

无能吐槽一下&#xff0c;虽然用了很多遍v-model&#xff0c;但是还是不得要领&#xff0c;每次看官网都感觉说的不是很清晰&#xff0c;在写的时候还是要查看文档&#xff0c;可能就是不理解原理&#xff0c;这次特意好好写一篇文章&#xff0c;让自己好好理解一下。 自定义一…

单线程传奇Redis,为何引入多线程?

大家都知道 Redis 的速度非常的快&#xff0c;这其中一个关键原因就是它采用了单线程模型&#xff0c;这也是它的一大独特之处。那么问题来了&#xff0c;既然单线程模型已经如此出色&#xff0c;为什么后续版本还要搞上多线程呢&#xff1f; 本文主要分析一下多线程在Redis中的…

ASP.NET Core 6 (.NET 6) 快速开发简单登陆和登出功能

ASP.NET Core 6中的简单登录和登出功能&#xff0c;需要使用身份验证和授权中间件实现&#xff0c; 1、添加引用 Microsoft.AspNetCore.Authentication.Cookies 使用Visual Studio 2022或更高版本开发工具&#xff0c;创建一个ASP.NET Core 6 (.NET 6) 项目&#xff0c;项目添…

推出新款H7-TOOL 2024版,同时发布新版固件V2.25(2024-02-24)

H7-TOOL 2024版介绍 1、开模定制外壳&#xff0c;取消了侧面的IO接口&#xff0c;汇集到一个主端口&#xff08;2 * 17P排针&#xff09;。 2、显示屏升级为2.8寸&#xff08;分辨率320*240)。 3、两个按键升级为4个按键&#xff1a;上键、下键&#xff0c;OK确认键和C取消键。…

npm install一直卡在 sill idealTree buildDeps

当npm install命令在安装过程中卡在sill idealTree buildDeps阶段时&#xff0c;可能的原因包括网络延迟、镜像源问题或缓存问题。以下是一些可能的解决方法&#xff1a; 检查镜像源&#xff1a; 打开命令提示符&#xff08;cmd&#xff09;窗口。 输入命令npm config get…

【大数据】Flink 内存管理(二):JobManager 内存分配(含实际计算案例)

Flink 内存管理&#xff08;二&#xff09;&#xff1a;JobManager 内存分配 1.分配 Total Process Size2.分配 Total Flink Size3.单独分配 Heap Size4.分配 Total Process Size 和 Heap Size5.分配 Total Flink Size 和 Heap Size JobManager 是 Flink 集群的控制元素。它由三…

【经验分享】分类算法与聚类算法有什么区别?白话讲解

经常有人会提到这个问题&#xff0c;从我个人的观点和经验来说2者最明显的特征是&#xff1a;分类是有具体分类的数量&#xff0c;而聚类是没有固定的分类数量。 你可以想象一下&#xff0c;分类算法就像是给你一堆水果&#xff0c;然后告诉你苹果、香蕉、橙子分别应该放在哪里…

Kotlin 基本语法5 继承,接口,枚举,密封

1.继承与重写的Open关键字 open class Product(val name:String ) {fun description() "Product: $name"open fun load() "Nothing .."}class LuxuryProduct:Product("Luxury"){//继承需要调用 父类的主构造函数override fun load(): String {…

自定义 Git Hook

前言 前端同学大概都熟悉 husky 这个工具&#xff0c;他可以直接在项目中添加 git hooks&#xff0c;主要解决了 git hooks 不会同步到 git 仓库的问题&#xff0c;保证了每个开发人员的本地仓库都能执行相同的 git hooks。 但是 husky 毕竟是一个 JS 生态的工具&#xff0c;…

ONLYOFFICE桌⾯应⽤程序v8.0:功能丰富,⽀持多平台

文章目录 可填写的 PDF 表单RTL支持电子表格中的新增功能其他改进和新增功能与 Moodle 集成用密码保护 PDF 文件快速创建文档本地界面主题总结 继 ONLYOFFICE 文档 v8.0 的发布后&#xff0c;很高兴&#xff0c;因为适用于 Linux、Windows 和 macOS 的 ONLYOFFICE 桌面应用程序…

2476. 二叉搜索树最近节点查询

Problem: 2476. 二叉搜索树最近节点查询 文章目录 思路解题方法复杂度Code 思路 找到所有节点然后再找满足要求的查询的值&#xff0c;一眼排序二分&#xff0c;看了眼数据范围&#xff0c;满足O(nlogn)。 解题方法 dfs获取所有节点的值&#xff0c;然后二分查找&#xff0c;获…