1、问题
在请求后台接口的时候,例如新建用户的时候,请求后台需要时间,用户可能多次点击创建按钮,导致多次调用后台接口,这个时候可以对按钮的点击做一些限制。
2、解决方法
1.按钮点击之后,设置定时器,3s之内不能再点(适合使用地方少的时候)
2.自定义指令
在js文件夹创建一个js
export default {
install (Vue) {
// 防止重复点击
Vue.directive('preventReClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled =true
setTimeout(() => {
el.disabled =false
},binding.value ||1000)
}
})
}
})
}
}
在main.js引入该js
import preventReClickfrom '../method/preventReClick';
Vue.use(preventReClick);
页面使用
<button @click="preventReclick" v-preventReClick="5000">禁止多次点击</button>