防止连续点击按钮,导致多次调用接口问题
文章目录
- 防止连续点击按钮,导致多次调用接口问题
- 一、为什么需要禁止按钮多次调用问题?
- 二、实现步骤
-
- [1.使用Vue.directive 自定义指令](#1.使用Vue.directive 自定义指令)
- 2.在入口文件main.js引入文件
- 2.使用自定义指令
- 总结
一、为什么需要禁止按钮多次调用问题?
因为在很多场景下,都会新增一些案例,如果允许可以多次调用就会出现新增多条同样的数据,还有就是在工作人员操作下会不小心多次点击导致多条同样的数据,会引起误解,因此需要防止连续点击新增/保存按钮多次
二、实现步骤
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>
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,就是为简单的简述了自定义指令的用法