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

继《Vue全局指令防止重复点击(等待请求)》之后,感觉指令方式还是不太友好,而且嵌套闭包比较麻烦,于是想到了Vue的全局混入,利用混入,给组件绑定click事件。

一、实现原理

与指令方式大致一样,只不过事件方式则是利用组件的事件监听属性完成绑定,这种方式更加友好、简洁、易懂。

二、使用

<el-button type="primary" icon="el-icon-search" size="mini" @conClick="handleQuery">搜索</el-button>

三、注意事项

1. 同步和异步回调

当前方式同样支持同步和异步回调,且异步回调需闭包

同步:

handleQuery() {this.queryParams.pageNum = 1;await this.getList();
}

异步回调:

handleQuery() {return (removeDisabled) => {// 去掉组件禁用removeDisabled();}
}

四、代码

import Vue from 'vue'Vue.mixin({mounted() {// 获取组件所有的监听事件,判断有没有conClickif (this.$listeners && this.$listeners.conClick && this.$listeners.conClick instanceof Function) {// 如果有的话给对应的DOM添加click监听const el = this.$el;el.addEventListener('click', async (e) => {// 自定义点击开始DOM状态let hasCb = false;el.classList.add('is-disabled');el.disabled = true;// 执行组件绑定的事件const res = await this.$listeners.conClick();if (res instanceof Function) {// 如果获取的结果为方法,则为异步回调hasCb = true;const d = res(() => {el.disabled = false;el.classList.remove('is-disabled');})if (!(d instanceof Promise)) {hasCb = true;} else {await d;}}// 自定义点击结束DOM状态if (!hasCb) {el.disabled = false;el.classList.remove('is-disabled');}});}}
})

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

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

相关文章

针对小型企业网络防护的免费防火墙软件

针对小型企业网络防护&#xff0c;以下是一些适合的防火墙软件/解决方案&#xff1a; pfSense&#xff1a;pfSense 是一款基于 FreeBSD 的开源防火墙和路由器软件&#xff0c;提供丰富的功能和灵活的配置选项&#xff0c;适合用于小型企业网络防护。它支持多种功能&#xff0c;…

代码随想录算法训练营第五十五天| 309.最佳买卖股票时机含冷冻期、714.买卖股票的最佳时机含手续费

309.最佳买卖股票时机含冷冻期 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a;今天若买入&#xff0c;应当是前天积攒的利润减去当前股票 java&#xff1a; class Solution {public int maxProfit(int[] prices) {if (prices null |…

Linux 网络命令指南

目录 配置IP地址和子网掩码 网络接口的详细信息 测试与目标主机的连通性 下载文件或内容 远程登录&#xff0c;进行远程管理和协作 CentOS / Red Hat&#xff08;使用 firewalld&#xff09; 关闭防火墙 开启防火墙 配置TCP端口&#xff08;假设使用3306端口&#xff…

最短路径算法总结(Dijkstra、Bellman-ford、SPFA和Floyd)

在最短路径算法中&#xff0c;常用的有Dijkstra、Bellman-ford、spfa、Floyd这四大算法 Dijkstra&#xff1a;迪克斯特拉算法Bellman-ford&#xff1a;贝尔曼-福特算法SPFA&#xff1a;Shortest Path Faster Algorithm算法Floyd&#xff1a;弗洛伊德算法 四大算法介绍 简介 …

一键获取电商平台商品信息,快速提高电商业务效率

阿里巴巴店铺所有商品API接口技术全解析 一、引言 在阿里巴巴这个全球领先的电商平台上&#xff0c;店铺所有商品API接口&#xff08;item_search_shop&#xff09;为开发者提供了一个便捷的途径&#xff0c;能够获取店铺的所有商品信息。通过这一接口&#xff0c;无论是数据…

Web UI自动化测试原理

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

【深度学习笔记】3_7 softmax回归的简介实现

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 3.7 softmax回归的简洁实现 我们在3.3节&#xff08;线性回归的简洁实现&#xff09;中已经了解了使用Pytorch实现模型的便利。下面&#xff0c;让我们再次使用Pytorc…

每日五道java面试题之spring篇(六)

目录&#xff1a; 第一题 ApplicationContext通常的实现是什么&#xff1f;第二题 什么是Spring的依赖注入&#xff1f;第三题 依赖注入的基本原则第四题 依赖注入有什么优势&#xff1f;第五题 有哪些不同类型的依赖注入实现方式&#xff1f; 第一题 ApplicationContext通常的…

d3dcompiler_47.dll是什么,电脑出现d3dcompiler_47.dll丢失如何解决

当打开软件时提示“d3dcompiler_47.dll丢失”时&#xff0c;用户通常会看到类似于以下的错误消息&#xff1a; “无法启动此程序&#xff0c;因为计算机中丢失了d3dcompiler_47.dll。尝试重新安装该程序以解决此问题。” “找不到d3dcompiler_47.dll文件&#xff0c;因此应用…

分布式一致性软件-zookeeper

在我们进行软件开发过程中&#xff0c;为了实现某个功能可能借助多个软件&#xff0c;如存储数据的数据库软件&#xff1a;MySQL&#xff0c;Redis&#xff1b;消息中间件&#xff1a;rocketMq&#xff0c;kafka等。那么在分布式系统中&#xff0c;如果想实现数据一致性&#x…

[git] 根据master更新本地分支

git 当前分支 t1 拉取远程master分支, 并更新将master分支合并到当前分支t1 git fetch origin master git merge origin/master t1第一行命令 git fetch origin master 会从远程仓库中获取最新的 master 分支代码&#xff0c;将其保存到本地的 origin/master 分支。 第二行命…

数据库原理及应用(MySQL版在线实训版)

学习视频&#xff1a;学生学习页面 (xueyinonline.com) 头歌实验&#xff1a;虚拟教研室-数据库原理及应用 (educoder.net) 习题答案&#xff1a;数据库原理及应用&#xff08;MySQL版在线实训版&#xff09;-习题答案 陈业斌 - 道客巴巴 (doc88.com)

[C++]虚函数用法

讲虚函数之前先讲讲面向对象的三大特性&#xff1a;封装、继承、多态。 1、封装 封装是指将数据&#xff08;属性&#xff09;和操作数据的方法&#xff08;函数&#xff09;封装在一个单元中&#xff0c;这个单元就是类。封装的主要目的是隐藏类的内部实现细节&#xff0c;只…

Java内部类的使用与应用

内部类的使用与应用 1. 内部类用法 普通内部类&#xff1a; 实例化内部类对象需要先实例化外部类对象&#xff0c;然后再通过OuterClassName.new InnerClassName()方式实例化内部类。内部类对象在创建后会与外部类对象秘密链接&#xff0c;因此无法独立于外部类创建内部类对象…

JWT学习笔记

了解 JWT Token 释义及使用 | Authing 文档 JSON Web Token Introduction - jwt.io JSON Web Token (JWT&#xff0c;RFC 7519 (opens new window))&#xff0c;是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准&#xff08;(RFC 7519)。该 token 被设计为紧凑…

微服务-微服务Spring Security OAuth 2实战

1. Spring Authorization Server 是什么 Spring Authorization Server 是一个框架&#xff0c;它提供了 OAuth 2.1 和 OpenID Connect 1.0 规范以及其他相关规范的实现。它建立在 Spring Security 之上&#xff0c;为构建 OpenID Connect 1.0 身份提供者和 OAuth2 授权服务器产…

高等数学(极限)

目录 一、数列 二、极限 2.1 讲解 2.2 例题 一、数列 按照一定次数排列的一列数&#xff1a; 其中 叫做通项。 对于数列&#xff0c;如果当n无限增大时&#xff0c;其通项无限接近于一个常数A&#xff0c;则称该数列以A为极限或称数列收敛于A&#xff0c;否则称数列为发散…

C语言所有标准头文件汇总及功能说明

文章目录 #include <assert.h>#include <ctype.h>#include <errno.h>#include <float.h>#include <fenv.h>#include <inttypes.h>#include <limits.h>#include <locale.h>#include <math.h>#include <process.h>#…

OpenCV(2)

1.OpenCV的模块 其中core、highgui、imgproc是最基础的模块&#xff0c;该课程主要是围绕这几个模块展开的&#xff0c;分别介绍如下&#xff1a; core模块实现了最核心的数据结构及其基本运算&#xff0c;如绘图函数、数组操作相关函数等。highgui模块实现了视频与图像的读取…

【JVM】计数器引用和可达性分析

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;JVM ⛺️稳中求进&#xff0c;晒太阳 C/C的内存管理 在C/C这类没有自动垃圾回收机制的语言中&#xff0c;一个对象如果不再使用&#xff0c;需要手动释放&#xff0c;否则就会出现内存泄漏…