前端防抖-通过自定义指令实现

前端防抖-通过自定义指令实现

1、通过自定义事件实现前端防抖

Vue.directive('preventReClick', {
    inserted (el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
            }, binding.value || 3000)
          }
        })
    }
})

2、在按钮上应用

<el-button type="prismary" style="width:100%;" @click="handleSubmit" v-preventReClick>确 认</el-button>