首页 > 建站教程 > 前端框架 >  给element-ui的button加入防止重复点击的指令正文

给element-ui的button加入防止重复点击的指令

在做项目时,经常会遇到手快重复点击,重复发送请求的情况,这里是从网上找的一段代码,可以给element-ui的button加上防止重复点击的自定义指令,不用一个一个去写防止重复点击的方法,直接引入到main.js,然后在全局使用v-db-click就可以了:
export default {}.install = (Vue, options = {}) => {
  Vue.directive('dbClick', {
    inserted(el, binding) {
      el.addEventListener('click', e => {
        if (!el.disabled) {
          el.disabled = true
          el.style.cursor = 'not-allowed'
          setTimeout(() => {
            el.style.cursor = 'pointer'
            el.disabled = false
          }, 1500)
        }
      })
    }
  })
}