img

Element-UI中给el-button加上防抖

2021-04-08 0条评论 2.9k次阅读 JavaScript


为啥我要加上防抖

在项目中常常会遇到这种问题

image.png 当我点击确定或者保存按钮时,如果请求时间过长或加上快速双击就会出现多次请求,造成意想不到的结果 起初我也试过自带的 loading属性

<el-button :loading="addLoading" type="primary" @click="submitForm('ruleForm')">确 定</el-button>

然后在 submitForm 时去改变 addLoading 的true 或 flase,但是问题来了,如果这个请求速度很并且我的点击速度很快还是会触发多次请求

解决方案

给按钮加上一个全局指令来限制在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秒
    })
  }
})

具体使用

<el-button v-no-more-click type="primary" @click="submitForm('ruleForm')">确 定</el-button>

手写的防抖就完成了

本文转自 https://juejin.cn/post/6948621847239852062,如有侵权,请联系删除。

💬 COMMENT


🦄 支持markdown语法

👋友