共计 516 个字符，预计需要花费 2 分钟才能阅读完成。
防抖按钮
自定义指令
//debounce.js
import Vue from "vue";
Vue.directive("debounce", {inserted(el, binding) {el.addEventListener("click", () => {el.classList.add("is-disabled");
el.disabled = true;
setTimeout(() => {
el.disabled = false;
el.classList.remove("is-disabled");
}, binding.value || 300); // 我这里设置的是 2000 毫秒也就是 2 秒
});
},
});主入口配置
//main.js
import "./directive/debounce.js";实例调用
<button v-debounce @click="test">test</button> // 默认
<button v-debounce="3000" @click="test">test</button> // 自定义工夫
<el-button v-debounce @click="test">test</el-button> //elemntui申请 loading 蒙层
正文完