国内几个做外贸的网站,政务网站建设具体指导意见,做效果图的兼职网站,微信 公众号平台项目中经常会遇到防抖这个场景#xff0c;比如#xff0c;页面滚动事件#xff1b;输入框自动搜索等。为了方便统一管理#xff0c;提高项目代码的可维护性。我们可以利用Vue的自定义指令完成这个功能。
自定义指令
生命周期/钩子函数
自定义指令拥有自身的生命周期比如页面滚动事件输入框自动搜索等。为了方便统一管理提高项目代码的可维护性。我们可以利用Vue的自定义指令完成这个功能。
自定义指令
生命周期/钩子函数
自定义指令拥有自身的生命周期如下所示
created(el,binding,vnode,preNode){} // 在绑定元素的属性之前
beforeMounted(el,binding,vnode,preNode) {} //在被插入到Dom前调用
mounted(el,binding,vnode,preNode){} //在绑定他的父组件和他所有的子组件都挂载完毕后调用
beforeUpdate(el,binding,vnode,preNode) {} //在绑定的父元素更新前调用
updated(el,binding,vnode,preNode) {} //在绑定元素的父组件及它的所有子组件都更新完成后调用
beforeUnmount(el,binding,vnode,preNode) {} //绑定元素的父组件卸载前调用
unmounted(el,binding,vnode,preNode) {} //绑定元素的父组件卸载后调用生命周的参数 el指令绑定到的元素。可以用于直接操作DOM binding一个对象包含如下属性。 value传递给指令的值。例如在 v-my-directive“1 1” 中值是 2。 oldValue之前的值仅在 beforeUpdate 和 updated 中可用。无论值是否更改它都可用。 arg传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中参数是 “foo”。 modifiers一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中修饰符对象是 { foo: true, bar: true }。 instance使用该指令的组件实例。 dir指令的定义对象。 vnode代表绑定元素的底层 VNode。 prevNode代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。
步骤
1. 在项目utils文件夹中新增debounce.js文件
在文件中编写防抖的逻辑代码
export const debounce {//ES6中对象中的方法可以直接写不用写属性名mounted(el, binding) {console.log(el, binding)const doHandler () {let timer nullreturn function () {if (timer) {clearTimeout(timer)}timer setTimeout(() {binding.value.handler()}, binding.value.delay);}}el.addEventListener(click, doHandler())},
}2.在utils文件夹下新建directives.js文件
在此文件中引入项目中所有自定义指令并将它们统一注册。
import {debounce} from ./debounceconst directivesObj {debounce
}const directives {
//使用Vue的install方法统一注册自定义指令。install(Vue) {Object.keys(directivesObj).forEach(key {Vue.directive(key,directivesObj[key])})}
}export default directives3.在main.js中使用指令
import directives from ./util/directives
const app createApp(App)
console.log(directives)
//使用install方法注册的对象可以通过app.use()来使用
app.use(directives)
