函数防抖和节流在平时业务中经常会用到,一般都是调用已经封装好的方法,下面介绍一种新的思路:vue自定义指令!
下面这段代码以防抖为例,el-input标签直接写上v-debounce,传入arg参数:search和expression表达式:‘input’,1000,seach为需要防抖的函数,'input'为绑定的事件名称,1000(ms)表示防抖间隔时间。
<template> <el-input v-debounce:search="'input',1000" v-model="value"></el-input> </template> <script> export default { name: 'Index', data() { return { value: '' } }, methods:{ search(){ console.log(this.value) } } } </script>
在main.js中自定义指令:
防抖:
//coder__wang Vue.directive("debounce", { inserted: (el, binding, vnode) => { const that = vnode.context, eventName = binding.expression.replace(/,(.+)/g, '').replace(/'/g, ''), delay = binding.expression.replace(/(.+),/g, '').replace(/'/g, ''), event = that[binding.arg]; el.addEventListener(eventName, wUtil.debounce(event, delay)); //防抖 } });
这里拿到dom对象el,给其添加eventName事件,wUtil是我的函数工具库:
下载: npm i wangs-utils
使用: import * as wUtil from 'wangs-utils/dist/wang_utils';
本文用到的debounce、throttle可以参考链接
vnode.context为当前虚拟节点的上下文,即当前组件实例,可以访问到页面中声明的search方法:
binding包含自定义指令的一些信息,arg:search为指令参数名称,expression: "'input',100"为指令右侧的表达式字符串,在本方法中可以将expression分为eventName和delay
这样vue自定义指令的防抖就完成了,下面附上节流代码(改一下防抖的指令名称和方法名称就ok):
节流:
//coder__wang Vue.directive("throttle", { inserted: (el, binding, vnode) => { const that = vnode.context, eventName = binding.expression.replace(/,(.+)/g, '').replace(/'/g, ''), delay = binding.expression.replace(/(.+),/g, '').replace(/'/g, ''), event = that[binding.arg]; el.addEventListener(eventName, wUtil.throttle(event, delay)); //节流 } });
脚踏实地行,海阔天空飞~