vue中防止按钮重复点击提交的方法
vue中防止按钮重复点击提交的方法一、自定义全局指令二、自定义局部指令三、动态控制disabled属性
vue中防止按钮重复点击提交的方法
经常会遇到的一个问题(如图所示),在短时间内点击按钮多次,会造成重复提交,出现多条数据,以下讲一下我的解决办法,比较类似,但是用起来能有效阻止提交多次。 ![btncommitagain](https://img-blog.csdnimg.cn/709d53ebd8274579920e45889245848f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUGFraG9fWWlw,size_15,color_FFFFFF,t_70,g_se,x_16#pic_center)
一、自定义全局指令
使用Vue.directive()来自定义全局注册指令,在main.js中加入下方这段代码,可以全局应用
// 防止el-button重复点击
Vue.directive('preventReClick', {
inserted(el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 2000)
}
})
}
});
接着在el-button中添加v-preventReClick,就可实现效果,在点击之后按钮变为禁用状态,持续禁用两秒,两秒之后便可再一次提交
// 添加新属性
保存
二、自定义局部指令
在export default {} 中写入下面这段代码,进行局部注册指令
// 防止el-button重复点击
directives: {
preventReClick: {
// 指令的定义
inserted(el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 2000)
}
})
}
}
},
接着也是在el-button中添加v-preventReClick,就可实现效果
// 添加新属性
保存
三、动态控制disabled属性
在el-button中添加disabled属性,进行动态控制
// 添加属性
保存
在需要调用的事件中,控制按钮启用禁用,实现的效果是在点击按钮后禁用两秒,两秒之后,按钮恢复启用状态
// 调用事件动态控制disabled属性
handleSave() {
this.disabled = true;
let params = {
data: this.data,
};
this.$requestFn("POST", this.$url.export.test, params)
.then((res) => {
this.$toast.success("保存成功");
})
.finally(() => {
setTimeout(() => {
this.disabled = false;
}, 2000)
});
},
使用以上几种方法,基本就能实现防止按钮重复点击导致,提交多次的问题,如果大家还有什么更好的方法,可以在评论中写下来,或者哪里有不足之处,请大家指出,我会虚心接受:)
|