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

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

文章目录


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

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

二、实现步骤

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

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

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引入文件

代码如下(示例):

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

2.使用自定义指令

html 复制代码
<el-button @click='handleClick' v-preventMoreClick>点击这里</el-button>

总结

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

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

相关推荐
纪元A梦5 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
会飞的鱼先生8 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了8 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风13 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风14 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺34 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺35 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码35 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou36 分钟前
组件测试
前端
JustHappy38 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js