Vue全局注册防抖函数自定义指令
1.src下utils文件夹下新建debounce.js
export default (vue) => {
/**
* 绑定方法
* @author CuiYunfei
* @param {Object} el - The element the directive is bound to.
* @param {Object} binding - An vue directive object
*/
vue.directive('debounce', { //防抖函数指令
inserted: function(el, binding) {
let timer;
el.addEventListener("click", () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
//关键点:vue 的自定义指令传递的参数binding 如果是一个函数,则通过 binding.value()来执行,通过上述示例,还可以传递比如事件, 绑定对象之类的
binding.value();
}, 1000);
});
}
})
}
main.js引入并注册自定义指令
// 引入debounce函数
import debounce from './assets/utils/debounce'
//注册
debounce(Vue);
使用debounce函数
<el-button type="primary" v-debounce="debounce()">触发防抖函数</el-button>
async debounce(){
console.log('输出防抖函数');
// 使用防抖可减轻服务器压力
let res = await userFormAdd()
},