[Development] vue super simple method to prevent the continuous click command js

 

vue anti repeatedly clicking (command to achieve)

Click the button quickly be repeated several times to call the interface, to prevent such a situation

Global definition, easy call

New plugins.js

export default {
  install (Vue) {
    // 防重复点击(指令实现)
    Vue.directive('preventReClick', {
      inserted (el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
            }, binding.value || 3000)
          }
        })
      }
    })
  }
}

References main.js

Directly call button plus v-preventReClick

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

 

Click the button quickly be repeated several times to call the interface, to prevent such a situation

Global definition, easy call

New plugins.js

export default {
  install (Vue) {
    // 防重复点击(指令实现)
    Vue.directive('preventReClick', {
      inserted (el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
            }, binding.value || 3000)
          }
        })
      }
    })
  }
}

References main.js

Directly call button plus v-preventReClick

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