Element-UI中给el-button加上防抖
为啥我要加上防抖在项目中常常会遇到这种问题当我点击确定或者保存按钮时,如果请求时间过长或加上快速双击就会出现多次请求,造成意想不到的结果解决方法:给按钮加上一个全局指令 noMoreClick 来限制在n的时间内为 disabled//在main.js中// 提交以后禁用按钮一段时间,防止重复提交import Vue from 'vue'Vue.directive('noMoreClick', {
·
为啥我要加上防抖
在项目中常常会遇到这种问题
当我点击确定或者保存按钮时,如果请求时间过长或加上快速双击就会出现多次请求,造成意想不到的结果
解决方法:
给按钮加上一个全局指令 noMoreClick 来限制在n的时间内为 disabled
//在main.js中
// 提交以后禁用按钮一段时间,防止重复提交
import Vue from 'vue'
Vue.directive('noMoreClick', {
inserted(el, binding) {
el.addEventListener('click', e => {
el.classList.add('is-disabled')
el.disabled = true
setTimeout(() => {
el.disabled = false
el.classList.remove('is-disabled')
}, 2000)//我这里设置的是2000毫秒也就是2秒
})
}
})
使用 v-no-more-click指令
<el-button v-no-more-click type="primary" @click="submitForm('ruleForm')">确 定</el-button>
更多推荐
已为社区贡献2条内容
所有评论(0)