vue中如何自定义指令directive

[](()三、应用场景

使用自定义组件组件可以满足我们日常一些场景， 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 这里给出几个自定义组件的案例：

• 防抖

• 图片懒加载

• 一键 Copy的功能

[](()输入框防抖

防抖这种情况设置一个v-throttle自定义指令来实现

举个例子：

// 1.设置v-throttle自定义指令

Vue.directive(‘throttle’, {

bind: (el, binding) => {

let throttleTime = binding.value; // 防抖时间

if (!throttleTime) { // 用户若不设置防抖时间，则默认2s

throttleTime = 2000;

}

let cbFun;

el.addEventListener(‘click’, event => {

if (!cbFun) { // 第一次执行

cbFun = setTimeout(() => {

cbFun = null;

}, throttleTime);

} else {

event && event.stopImmediatePropagation();

}

}, true);

},

});

//