vue3——两种利用自定义指令实现防止按钮重复点击的方法

方法一:利用定时器设置时间,下方代码设置时间为1秒

但是有个缺点:请求如果很慢,1秒钟还没有好,那么该方法就没用了

  // 利用定时器:1秒之后才能再次点击app.directive('preventReClick', {mounted: (el, binding) => {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 1000)}})}})

方法二:传入请求的函数作为参数,根据请求的finally来判断是否可以点击了,更推荐!!!

但是传入的参数必须是一个promise函数,否则就没用了

//自定义指令版本2:根据请求结果防止按钮重复提交请求//使用方式:传递一个请求函数,比如v-prevent-dup-click="submit"app.directive('preventDupClick', {mounted(el, binding) {//传递的参数必须是一个函数,否则报错if (typeof binding.value !== 'function') {throw new Error('v-prevent-dup-click instruction can transmit only A function')}// 一开始是未点击状态el.isClicked = falseconst handerClick = function (event) {// 如果已经点击过,则阻止事件if (el.isClicked === 'true') {event.preventDefault()event.stopPropagation()return}// 标记为已点击el.isClicked = 'true'// 调用传入的函数binding.value().finally(() => {el.isClicked = 'false'})}el.hander = handerClickel.addEventListener('click', handerClick)},//销毁事件beforeUnmount(el) {if (el.hander) {el.removeEventListener('click', el.hander)}}})

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

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

相关文章

sql注入的专项练习 sqlilabs(含代码审计)

在做题之前先复习了数据库的增删改查,然后自己用本地的环境,在自己建的库里面进行了sql语句的测试,主要是回顾了一下sql注入联合注入查询的语句和sql注入的一般做题步骤。 1.获取当前数据库 2.获取数据库中的表 3.获取表中的字段名 一、sql…

WordPress 后台开发技巧:向文章发布页右侧添加自定义菜单项

案例图片 这个案例向你介绍了如何在文章发布页的右侧边栏增加一个新的自定义菜单项。具体用它实现什么功能,就看你的需要了。 代码 function add_custom_menu_item() { add_meta_box(custom_menu_item, 这里是菜单项名称, display_custom_menu_item, post, side, …

基于JSP、java、Tomcat、mysql三层交互的项目实战--校园交易网(1)-项目搭建(前期准备工作)

这是项目的初始页面 接下来我先写下我的初始项目搭建 技术支持:JAVA、JSP 服务器:TOMCAT 7.0.86 编程软件:IntelliJ IDEA 2021.1.3 x64 首先我们打开页面,准备搭建项目的初始准备 1.New Project 2.随后点击Next,勾…

C# Aspose PDF.dll 实现PDF添加水印

在C#中使用Aspose.PDF库来给PDF文档添加水印是一个常见的需求。Aspose.PDF是一个功能强大的库,它允许开发者在不需要Adobe Acrobat或其他PDF查看器的情况下创建、修改、渲染、打印和解析PDF文档。以下是一个使用Aspose.PDF库给PDF添加水印的基本示例: 首…

AttributeError: ‘list‘ object has no attribute ‘text‘

AttributeError: ‘list‘ object has no attribute ‘text‘ 目录 AttributeError: ‘list‘ object has no attribute ‘text‘ 【常见模块错误】 【解决方案】 示例代码 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英…

IDEA缓存和索引

IDEA缓存和索引 —2020年06月10日 IntelliJ IDEA首次加载项目的时候。都会创建索引,而创建索引的时间根项目的文件多少成正比。 IntelliJ IDEA的缓存和索引主要是用来加快文件查询,从而加快各种查找、代码提示等操作的速度。 某些特殊情况下&#xf…

安科瑞邀您走进2024北京电气设计第44届年会

2024年7月11日,2024建筑电气高峰论坛暨北京电气设计第44届年会在京如期而至,各路精英齐聚一堂,围绕智慧建筑、数据中心、工业厂房配电、储能技术等热点问题展开讨论。安科瑞携企业微电网智慧能源的一站式服务解决方案亮相盛会,尽享…

Java面试八股之什么是spring boot starter

什么是spring boot starter Spring Boot Starter是Spring Boot项目中的一个重要概念。它是一种依赖管理机制,用于简化Maven或Gradle配置文件中的依赖项声明。Spring Boot Starter提供了一组预定义的依赖关系,这些依赖关系被封装在一个单一的包中&#x…

十日Python项目——第三日(用户中心——邮箱验证、修改密码)

#前言: 在最近十天我会用Python做一个购物类项目,会用到DjangoMysqlRedisVue等。 今天是第三天,主要负责撰写用户中心部分,以及优化登录部分。若是有不懂大家可以先阅读我的前两篇博客以能够顺承。博客:十日Python项…

C++——验证二叉搜索树leetcode98

C——验证二叉搜索树leetcode98 题目描述思路代码 题目描述 给你一个二叉树的根节点 root ,判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下: 节点的左子树只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树…

前端江湖:从菜鸟到大侠的修炼手册

在这个数字编织的梦幻世界里,前端,这个听起来就带着几分仙气与神秘感的词汇,实则是每一位互联网探险家手中的魔法杖。它不仅连接着代码的冰冷逻辑与用户的炽热情感,更在无数次的点击与滑动间,绘制出一幅幅绚丽多彩的交…

yolov8.1超简单环境搭建、标注、训练、转onnx、转输出维度

1.显卡驱动查看 nvidia-smi 2.yolo源码与模型 https://hub.nuaa.cf/ultralytics/ultralytics https://github.com/ultralytics/ultralytics 3.anaconda https://www.anaconda.com/download或 https://repo.anaconda.com/miniconda/Miniconda3-latest-Windows-x86_64.exe …

Godot入门 05收集物品

创建新场景,添加Area2D节点,AnimatedSprite2D节点 ,CollisionShape2D节点 添加硬币 按F键居中,放大视图。设置动画速度设为10FPS,加载后自动播放,动画循环 碰撞形状设为圆形,修改Area2D节点为Co…

[K8S] K8S资源控制器Controller Manager(4)

文章目录 1. 常见的Pod控制器及含义2. Replication Controller控制器2.1 部署ReplicaSet 3. Deployment3.1部署Deployment3.2 运行Deployment3.3 镜像更新方式3.4 Deployment扩容3.5 滚动更新3.6 金丝雀发布(灰度发布)3.7 Deployment版本回退3.8 Deployment 更新策略 4. Daemon…

Go语言常见序列化协议全面对比

先说结论 从易用性、性能、内存占用、编码后大小等几个方面综合考虑 ProtoBuf 胜出。 Gob 从性能和 I/O 带宽占用上都和 ProtoBuf 差不多,唯一劣势是编解码时内存占用较多。考虑到不用再写 IDL 带来的易用性,如果整个系统内不存在使用除 Go 以外其他语言…

高可用高并发常见问题以及答案

什么是高可用系统?如何评估系统的可用性? 高可用系统是指系统能够以高度的稳定性和可靠性运行,即使在面对硬件或软件故障时也能保持正常运行。可用性通常通过系统的 downtime(不可用时间)来评估,例如通过 SLA(Service Level Agreement)来定义系统在特定时间段内可用的…

人工智能与机器学习原理精解【7】

文章目录 凸优化基础理论加权正规方程线性回归模型加权最小二乘法加权正规方程注意使用Diagonal函数使用diagm函数总结 加权最小二乘法加权最小二乘法的定义加权最小二乘法的算法加权最小二乘法的计算加权最小二乘法的原理一、基本思想二、原理详解三、总结 加权最小二乘法的例…

贸易壁垒的作用及影响

目录 什么是贸易壁垒 关税壁垒和非关税壁垒 贸易壁垒的好处 贸易壁垒的负面影响 什么是贸易壁垒 贸易壁垒又称贸易障碍,一般分关税壁垒和非关税壁垒两类。 所谓关税壁垒,是指进出口商品经过一国关境时,由政府所设置的海关向进出口商征收…

外卖霸王餐系统推荐,哪家的系统比较稳定呢?

以下是一些较为稳定且有一定用户基础的外卖霸王餐系统,你可以根据自身需求进一步考察和选择: - **饭否霸王餐**:有专门的APP,如在应用宝上其开发商为南京有惠鲸选电子商务有限公司。它覆盖了多个城市,提供美团、饿了么…

巴黎奥运启幕 PLM系统助力中国制造闪耀全球

2024巴黎奥运会将于法国当地时间7月26日在塞纳河畔正式开幕。即将亮相巴黎奥运会赛场的除了中国运动员之外,还有一批批中国制造企业为奥运会设计并制造的体育设备也将惊艳亮相,成为赛场上另一道亮丽的风景线。 在新时代的浪潮中,中国制造业坚…