Vue 全局避免按钮重复点击

这里用到的 Vue.directive 自定义指令

自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的

在 main.js 中写入以下代码

// 避免按钮重复点击
Vue.directive('preventReClick', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 1000)
      }
    })
  }
})

 

posted @ 2022-05-27 11:28  甲辰哥来帮你算命  阅读(310)  评论(0编辑  收藏  举报