vue中设置按钮不能进行短时间的重复点击而重复的触发事件
1、在项目中遇到一个问题:当事件中的代码执行耗费时间,且用户在短时间不断点击按钮,造成短时间多次触发了按钮的事件(不断向服务器发起请求)2、解决办法①方法一: 定义一个变量(如:isLock)来控制按钮的disable属性,进而来防止用户短时间的多次点击按钮②方法二:全局定义一个指令,通过在按钮绑定指令来控制按钮被点击间隔时间3、具体实现:方法1步骤:① 首先设置变量isLock属性值为false
·
1、在项目中遇到一个问题:当事件中的代码执行耗费时间,且用户在短时间不断点击按钮,造成短时间多次触发了按钮的事件(不断向服务器发起请求)
2、解决办法
①方法一: 定义一个变量(如:isLock)来控制按钮的disable属性,进而来防止用户短时间的多次点击按钮
②方法二:全局定义一个指令,通过在按钮绑定指令来控制按钮被点击间隔时间
3、具体实现:
方法1步骤:
① 首先设置变量isLock属性值为false,使得按钮可点击(disable: true)
② 当用户点击后,立即设置按钮不可点击(disable: false)
③ 等待事件执行完或者相应的间隔时间后,恢复按钮为可点击状态
<el-button @click="clickBtn" :disable="isLock">按钮</el-button>
export default{
data(){
return {
isLock: false, // 控制按钮的disable属性
}
},
methods: {
clickBtn(){
// 设置按钮不可点击(disable: false)
this.isLock = true
// 执行耗时间的代码或事件请求等....
// 等待事件执行完或者相应的间隔时间后,恢复按钮为可点击状态
setTimeout(() => {
this.isLock = false
}, 2000)
}
}
}
方法2:
① 首先创建一个指令文件中(如:directive.js文件)
② 在directive.js文件在创建一个全局的指令(如:preventReClick)
③ 在指令中根据按钮元素的disable状态值来设置被绑定按钮的状态(如,改变按钮的背景色和边框色)
④ 然后在入口文件main.js文件中引入指令
⑤ 在需要禁止重复点击的按钮上绑定指定
====== directive.js文件中 ====
import Vue from 'vue'
const preventReClick = Vue.directive('preventReClick',{
inserted: function(el, binding, vNode, oldVnode){
el.addEventListener('click', () => {
if(!el.disabled){
el.disabled = true
el.style.backgroundColor = '#ccc'
el.style.border = 'none'
setTimeout(() => {
el.disabled = false
el.style.backgroundColor = '#1890ff'
el.style.border = '1px solid #1890ff'
}, 2000)
}
})
}
})
export default {
preventReClick
}
====== 在main.js文件中引入指令 =====
import {preventReClick } from './directive/directive.js'
Vue.use(preventReClick )
======= 按钮元素上绑定指定 ======
<el-button v-preventReClick >需要阻止重复点击的按钮元素11111</el-button>
<button v-preventReClick >需要阻止重复点击的按钮元素22222</button>
更多推荐
已为社区贡献32条内容
所有评论(0)