1. Fügen Sie etwas Code in main.js hinzu, um wiederholte Klicks auf die El-Schaltfläche zu verhindern
Vue.directive('preventReClick', {
inserted(el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 2000)
}
})
}
});
2. Seitenreferenz, neues Attribut v-preventReClick hinzufügen. Diese Methode ist nur für el-button gültig.
<el-button type="primary" @click="clickSave" v-preventReClick>保存</el-button>
Es gibt auch eine Drosselungsmethode, die für Divs funktioniert
1. Erstellen Sie das Utils-Tool ReduceExpenditure.js und schreiben Sie den folgenden Code:
// 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. Globale Registrierung in main.js
import {
reduceExpenditure } from "./utils/reduceExpenditure";
Vue.prototype.$reduceExpenditure = reduceExpenditure;// 全局注册节流
3. Seitenzitate
//节流3秒
<el-button type="primary" @click="clickSave" v-preventReClick>保存</el-button>
//节流1秒
<el-button type="primary" @click="clickSave" v-preventReClick='1000'>保存</el-button>