防止连续点击按钮,多次调用接口

防止连续点击按钮,导致多次调用接口问题

文章目录

  • 防止连续点击按钮,导致多次调用接口问题
  • 一、为什么需要禁止按钮多次调用问题?
  • 二、实现步骤
    • 1.使用Vue.directive 自定义指令
    • 2.在入口文件main.js引入文件
    • 2.使用自定义指令
  • 总结


一、为什么需要禁止按钮多次调用问题?

因为在很多场景下,都会新增一些案例,如果允许可以多次调用就会出现新增多条同样的数据,还有就是在工作人员操作下会不小心多次点击导致多条同样的数据,会引起误解,因此需要防止连续点击新增/保存按钮多次

二、实现步骤

1.使用Vue.directive 自定义指令

使用自定义指令的好处就是方便简洁,还有就是用的地方比较多,不用到处引入文件,创建一个文件后缀为xxx.js

export default {install(Vue) {// 防止重复点击preventMoreClick 就是自定义命令的名称Vue.directive('preventMoreClick', {inserted(el, binding) {// 监听事件el.addEventListener('click', () => {if (!el.disabled) {el.disabled = true;// 给一个定时器点一次需要多久才可以点从而实现了这个功能setTimeout(() => {el.disabled = false;}, 2000);}});}});}
};

2.在入口文件main.js引入文件

代码如下(示例):

j// XXX就是文件名称
import XXX from 'xxx.js';
Vue.use(XXX );

2.使用自定义指令

<el-button @click='handleClick' v-preventMoreClick>点击这里</el-button>

总结

提示:这里对文章进行总结:

例如:以上就是今天要讲的内容,就是为简单的简述了自定义指令的用法

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

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

相关文章

再谈 dijkstra 算法和最短路径问题

前置文章&#xff1a; dijkstra 算法为什么高效 有向图的负权值边与建模 求单源最短路径的新方法 前天晚上实现了一个基于 dijkstra 算法的求单源最短路径的新算法&#xff0c;整理了一篇文章。我非常不愿意把一些直观的问题太过于技术化&#xff0c;但多年的职业经历偏偏让一…

C#——静态成员和非静态成员详情

静态成员和非静态成员 调用: 静态属性(static) : 类名.属性名调用 非静态属性(没static) : 1.先创建对象 2.对象.属性 特点: 静态方法里面只能访问静态成员 非经态方法中可以访问所有的属性 static数据成员在类的内部声明&#xff0c;但只能在类的外部定义&#xff0c;…

【软件安装9】OpenCV多版本安装Ubuntu18.04

文章目录 一、查看已安装的Opencv版本二、安装新版本三、多版本OpenCV切换 OpenCV 官网 在此 一、查看已安装的Opencv版本 查看已安装opencv的版本 pkg-config opencv --modversion官网下载对应的版本&#xff0c;并解压 opencv3.4.3 二、安装新版本 进入前置准备里下载…

24年法考报名照片千万别乱拍,否则卡审

法考报名照片每年都有很多被卡审&#x1f62d; 常见的问题是 ①照片比例不对&#xff0c;无法上传&#xff0c;人像比例要求非常严格 ②照片像素错误&#xff0c;不能直接拿大图压缩图片&#xff0c;需要做出413*626像素的法考证件照 ③照片文件偏大&#xff0c;照片要求40-100…

C# 通过Path获取后缀,文件名,目录等

static void Test() {string path "E:\\软件包\\net安装包\\4_NDP472-KB4054531-Web.exe";Console.WriteLine("目录:" Path.GetDirectoryName(path)); //E:\软件包\net安装包Console.WriteLine("后缀:" Path.GetExtension(path)); //.exeCons…

单触控单输出触摸开关芯片PT2052A

1.产品概述 PT2052封装和丝印 PT2052A 是一款单通道触摸检测芯片。该芯片内建稳压电路&#xff0c;提供稳定电压给触摸感应电路使用&#xff0c;同时内部集成高效完善的触摸检测算法&#xff0c;使得芯片具有稳定的触摸检测效果。该芯片专为取代传统按键而设计&#xff0c;具有…

【精品方案】离散型制造行业智能工厂标准解决方案(49页 PPT)

引言&#xff1a;随着科技的不断进步和制造业的转型升级&#xff0c;离散型制造行业正面临着从传统制造向智能制造转型的迫切需求。离散型制造行业涉及的产品种类繁多&#xff0c;生产流程复杂&#xff0c;对生产效率、产品质量和成本控制有着极高的要求。因此&#xff0c;开发…

SQL中的UPDATE语句:别让你的数据“离家出走”

sql的update操作正式环境用的很少&#xff0c;但是在测试环境还是用的挺多的。 想象一下&#xff0c;你正在管理一个学校的数据库&#xff0c;其中有一个students表&#xff0c;记录着每个学生的信息。有一天&#xff0c;你接到通知说某个学生的年龄或成绩需要更新。这时&…

【Java并发编程之美 | 第一篇】并发编程线程基础

文章目录 1.并发编程线程基础1.1什么是线程和进程&#xff1f;1.2线程创建与运行1.2.1继承Thread类1.2.2实现Runnable接口1.2.3实现Callable接口&#xff08;与线程池搭配使用&#xff09;1.2.4小结 1.3线程常用方法1.3.1线程等待与通知1.3.2线程睡眠1.3.3让出CPU执行权1.3.4线…

漫步者开放式耳机值得买吗?漫步者、西圣、小米硬核测评pk性能!

说起开放式蓝牙耳机&#xff0c;相信大部分朋友都不会陌生。与传统的封闭式耳机相比&#xff0c;开放式蓝牙耳机不仅提升了佩戴舒适度&#xff0c;还对耳朵有良好的保护效果。特别适合喜欢户外运动和长途旅行的用户。然而&#xff0c;由于市场上产品众多&#xff0c;选择一款高…

用Python向Word文档添加页眉和页脚

用Python向Word文档添加页眉和页脚 添加页眉和页脚效果代码 添加页眉和页脚 在本文中&#xff0c;我们将用python向文档中添加页眉和页脚。 效果 添加前的文档&#xff1a; 添加页眉和页脚后&#xff1a; 代码 from docx import Documentdef add_header_footer(doc_path…

DataCap 自定义 File 转换器

DataCap 支持自定义 File 转换器&#xff0c;使用者可以编写自己的文件转换器集成到 DataCap 中。该文档主要讲解如何快速集成一个文件转换器到 DataCap 系统中。 该模块我们主要使用到的是 file 模块内的代码&#xff0c;我们本文使用 json 来做示例。 模块基本配置 新建项目…

从零手写实现 nginx-23-directive IF 条件判断指令

前言 大家好&#xff0c;我是老马。很高兴遇到你。 我们为 java 开发者实现了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何处理的&#xff0c;可以参考我的另一个项目&#xff1a; 手写从零实现简易版 tomcat minicat 手写 nginx 系列 …

UE4_后期_ben_模糊和锐化滤镜

学习笔记&#xff0c;不喜勿喷&#xff0c;侵权立删&#xff0c;祝愿生活越来越好&#xff01; 本篇教程主要介绍后期处理的简单模糊和锐化滤镜效果&#xff0c;学习之前首先要回顾下上节课介绍的屏幕扭曲效果&#xff1a; 这是全屏效果&#xff0c;然后又介绍了几种蒙版&#…

java基础语法整理 -----下

java基础语法整理 一、数组二、面向对象三、字符串1.String常见成员方法2.使用小案例用户登录案例遍历字符串案例统计字符次数案例字符串拼接案例手机号屏蔽 四、集合 链接: java基础语法整理 -----上 一、数组 1.从概念谈起 概念&#xff1a;指的是一种容器&#xff0c;可以…

MySQL与PostgreSQL关键对比四(关联查询性能)

引言&#xff1a;MySQL单表的数据规模一般建议在百万级别&#xff0c;而PostgreSQL的单表级别一般可以到亿级&#xff0c;如果是MPP版本就会更多。从基础数据建议上&#xff0c;不难看出&#xff0c;MySQL在Join的情况下也就是主要查询的情况下性能和PostgreSQL相差还是很大的。…

Vue35-生命周期小结

一、8个&#xff0c;4对生命周期函数 第一对&#xff1a;数据监测、数据代理&#xff0c;创建之前和创建之后。 注意&#xff1a;不是vm的创建&#xff01;&#xff01;&#xff01; 第二队&#xff1a;beforeMount和mounted 第三队&#xff1a;beforeUpdate和update 第四队…

ElasticSearch的桶聚合

桶聚合 在前面几篇博客中介绍的聚合指标是指符合条件的文档字段的聚合,有时还需要根据某些维度进行聚合。例如在搜索酒店时,按照城市、是否满房、标签和创建时间等维度统计酒店的平均价格。这些字段统称为“桶”,在同一维度内有一个或者多个桶。例如城市桶,有“北京”、“天…

input输入框禁止输入小数点方法

使用blur事件&#xff1a; <el-input v-model"number" type"number" placeholder"请输入" blur"numberBlur" /> 第一种&#xff1a; 使用parseInt转为整数&#xff1a; this.number parseInt(this.number);第二种&#xff…

MAC地址详解

一、MAC地址 MAC地址&#xff0c;英文全称为Media Access Control&#xff0c;前面我们就介绍过MAC地址&#xff0c;MAC地址也称为物理地址或者硬件地址&#xff0c;每个网卡都有一个MAC地址&#xff0c;是数据在实际传输过程中所用到的地址。 二、 MAC组成 前面就介绍过&…