Vue는 반복적으로 저장하고 제출하기 위해 여러 번 클릭하는 것을 방지하기 위해 저장 버튼을 반복적으로 클릭하는 것을 제한합니다.

1. main.js에 몇 가지 코드를 추가하여 el-버튼 반복 클릭을 방지합니다.

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

2. 페이지 참조, 새 속성 v-preventReClick을 추가합니다. 이 방법은 el-button에만 유효합니다.

<el-button type="primary" @click="clickSave" v-preventReClick>保存</el-button>

div에 적용되는 스로틀링 방법도 있습니다.

1. utils 도구 reduceExpenditure.js를 생성하고 다음 코드를 작성합니다.

// vue
import Vue from 'vue'
// create directive
const preventReClick = Vue.directive('preventReClick', {
    
    
  inserted: function (el, binding) {
    
    
    el.addEventListener('click', () => {
    
    
      // 判断按钮是否可点击
      if (!el.disabled) {
    
    
        el.disabled = true
        setTimeout(() => {
    
    
          el.disabled = false
        }, binding.value || 3000)//默认3秒节流时间
      }
    })
  }
})

// export
export {
    
     preventReClick }

2. main.js의 글로벌 등록

import {
    
     reduceExpenditure } from "./utils/reduceExpenditure";
Vue.prototype.$reduceExpenditure = reduceExpenditure;// 全局注册节流

3. 페이지 인용

//节流3秒
<el-button type="primary" @click="clickSave" v-preventReClick>保存</el-button>
//节流1秒
<el-button type="primary" @click="clickSave" v-preventReClick='1000'>保存</el-button>