I don’t know why I have to add anti-shake

This problem is common in projects

When I click ok or save, if pleaseFind too long oraddDouble-click on the fastYou get multiple requests with unexpected results and I tried my own at firstLoading properties

<el-button :loading="addLoading" type="primary" @click="submitForm('ruleForm')"> determine < / el - button >Copy the code

Then I change the addLoading true or flase on the submitForm, but the problem is, if the request is fast and I click fast, I will still trigger multiple requests

The solution

Add a global directive to the button to restrict it to disabled for n times

/ / in the main. In js
// Disable the button for a period of time after submission to prevent repeated submission
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)// I set 2000 milliseconds, which is 2 seconds})}})Copy the code

The specific use

<el-button v-no-more-click type="primary" @click="submitForm('ruleForm')"> determine < / el - button >Copy the code

Handwritten anti – shake is complete