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');}});}}
})
相关文章:
Vue全局事件防止重复点击(等待请求)【进阶版】
继《Vue全局指令防止重复点击(等待请求)》之后,感觉指令方式还是不太友好,而且嵌套闭包比较麻烦,于是想到了Vue的全局混入,利用混入,给组件绑定click事件。 一、实现原理 与指令方式大致一样&…...
C#程序反编译经验总结
1. 反编译出的代码有问题时,可以用多个反编译工具之间的代码相互印证。(比如.net reflector 与ILSpy) 2. 有时Visual Studio编译的错误信息不明确时, 可以msbuild编译程序,msbuild的错误信息相对完整一些。 2.1 编译错误…...

Android系统启动流程
android的启动流程是从底层开始进行的,具体如下所示: Android是基于Linux内核的系统,Android的启动过程主要分为两个阶段,首先是Linux内核的启动,然后是Android框架的启动。 可以将Andorid系统的启动流程分为以下五个…...

Flask——基于python完整实现客户端和服务器后端流式请求及响应
文章目录 本地客户端Flask服务器后端客户端/服务器端流式接收[打字机]效果 看了很多相关博客,但是都没有本地客户端和服务器后端的完整代码示例,有的也只说了如何流式获取后端结果,基本没有讲两端如何同时实现流式输入输出,特此整…...

crmeb多门店商城系统二次开发 增加车辆车牌搜索功能、车辆公里数
1、增加的数据库 ALTER TABLE eb_store_order ADD cart_number VARCHAR(255) NOT NULL DEFAULT COMMENT 车牌 AFTER erp_order_id, ADD curmileage VARCHAR(255) NOT NULL DEFAULT COMMENT 当前里程 AFTER cart_number; ALTER TABLE eb_store_cart ADD cart_number VARCHAR(…...

深度好文|关于人类智能与自主系统
上个世纪 50 年代,在二战结束没多久,人们开始研究和设计智能系统。作为信息学的分支,人类开始了最早对于人工智能的研究。时间来到 60 年代,人们对于计算机的发展充满了信心,人们断言“20年内机器能够做任何人所能做的…...

防火墙内容安全笔记
目录 DFI和DPI IDS和IPS 签名 AV URL过滤 HTTPS过滤 内容过滤 文件类型过滤 文件内容过滤 邮件过滤 VPN概述 DFI和DPI DFI和DPI技术 --- 深度检测技术 DPI DPI --- 深度包检测技术 --- 主要针对完整的数据包(数据包分片,分段需要重组&#…...

应用于温度报警器中的高精度温度传感芯片
温度报警器通常由温度传感器、控制电路和报警装置组成。温度传感器能够将温度变化转换为电信号,控制电路则对这些信号进行处理,当检测到的温度达到或超过预设的报警阈值时,报警装置会通过声音、灯光或其他方式发出警报,以提醒用户…...

微信小程序swiper 视频中间大,两边小,轮播滑到中间视频自动播放组件教程
静态效果: 进入下面小程序可以体验效果,点击底部 看剧 栏目 一、创建小程序组件 二、代码 1、WXML <view class"swiper-wrapper"><swiperclass"main-sw"autoplay"{{false}}"circular"{{true}}"inte…...

ARM服务器上部署zookeeper集群
由于ARM服务器上部署zookeeper集群,会存在加载不到主类问题,现在把遇到的问题进行总结下,问题如下: [rootnode206 apache-zookeeper-3.5.10]# bin/zkServer.sh start ZooKeeper JMX enabled by default Using config: /data1/software/apache-zookeeper-3.5.10/bin/../conf/…...

利用Ubuntu22.04启动U盘对电脑磁盘进行格式化
概要: 本篇演示利用Ubuntu22.04启动U盘的Try Ubuntu模式对电脑磁盘进行格式化 一、说明 1、电脑 笔者的电脑品牌是acer(宏碁/宏基) 开机按F2进入BIOS 开机按F12进入Boot Manager 2、Ubuntu22.04启动U盘 制作方法参考笔者的文章: Ubuntu制作Ubun…...

Nginx基础入门
一、Nginx的优势 nginx是一个高性能的HTTP和反向代理服务器,也是一个SMTP(邮局)服务器。 Nginx的web优势:IO多路复用,时分多路复用,频分多路复用 高并发,IO多路复用,epoll…...
分布式和微服务
分布式和微服务是两个不同的概念。 分布式系统是说多个独立的计算机或服务器组成的系统,这些计算机通过网络进行通信和协作,共同完成一个任务或提供一个服务。 分布式系统的目标是通过协作实现高性能、高可用性和高扩展性。 微服务是一种架构风格&…...
【无标题】学习Markdown
https://shadows.brumm.af 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些…...
由于 vscode 版本更新为 1.86.1引起的相关问题。
通过vscode ssh来远程连接linux服务器的代码,由于vscode 1.86.1的更新,在连接服务器时就开始报 两个错误了: Missing GLIBCXX > 3.4.25! Missing GLIBC > 2.28! lwd192.168.66.148s password: 075b6e8e3a87: runningMissing GLIBCXX &g…...

四、矩阵的分类
目录 1、相等矩阵 2、同形矩阵 3、方阵: 4、负矩阵、上三角矩阵、下三角矩阵: 5、对角矩阵:是方阵 编辑7、单位矩阵:常常用 E或I 来表示。它是一个方阵 8、零矩阵: 9、对称矩阵:方阵 1、相等矩阵 …...

Windows环境下查看磁盘层级占用空间的解决方案
大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

超级实用的python代码片段汇总和详细解析(16个)
目录 1. 生成随机文本 2. 计算文本文件中的字数 3. 替换文件文件中的字串 4. 多文件名的批量替换 5. 从网站提取数据 6. 批量下载图片 7.批量删除空文件夹 8.Excel表格读写 9.合并Excel表格工作簿 10.数据库SQL查询 11. 系统进程查杀 12.图像尺寸调整和裁剪 13.图…...

npm/nodejs安装、切换源
前言 发现自己电脑上没有npm也没有node很震惊,难道我没写过代码么?不扯了,进入正题哈哈…… 安装 一般没有npm的话会报错: 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称而且报这个错,我们执行…...

【Kotlin】流程控制
1 选择结构 Kotlin 中选择结构主要包含 if -else、when 语句,并且可以返回结果。 1.1 if-else 1.1. 条件选择 fun main() {var score 85if (score > 90) {println("优秀")} else if (score > 80) {println("良好")} else if (score &…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...

【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...

Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...