vue3定义全局防抖指令

文章目录

在写项目时,总会有要进行防抖节流的时候,如果写一个debounce函数的话 用起来代码总会是有点长的,因此想到了用一个全局指令进行输入框的防抖,毕竟全局指令使用时只要v-xxx就行了,非常方便

代码

前提是需要全局注册

使用

javascript 复制代码
export default {
  debounce: {
    mounted(
      el: {
        addEventListener: (arg0: string, arg1: () => void) => void;
        value: any;
      },
      binding: { value: any; arg: any },
    ) {
      let timer: number | null = null;
      const { value, arg = 0 } = binding;
  

      el.addEventListener("input", () => {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          value(el.value, arg);
        }, 1000);
      });
    },
    updated(
      el: {
        addEventListener: (arg0: string, arg1: (e: any) => void) => void;
        value: any;
        removeEventListener: (arg0: string, arg1: (e: any) => void) => void;
      },
      binding: { value: any; arg: any },
    ) {
      // 若指令的值更新,重新绑定事件处理函数
      let timer: number | null = null;
      let { value, arg = 0 } = binding;
      const existingListener = (e: any) => {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          value(el.value, arg);
        }, 1000);
      };
    //   el.removeEventListener("input", existingListener);
    //   el.addEventListener("input", existingListener);
    },
  },
};

v-debounce 后面的 :[typeId]就是传的参数 即arg

注意:如果写v-debounce.typeId 那么传的就是一个字符串"typeId" 而且[ ]只支持传一个参数 如果想要传多个参数的话 建议使用数组进行整体的传参

参数讲解

讲一下binding函数的几个参数

javascript 复制代码
  bind(el, binding, vnode, oldVnode) { }

el:指令绑定的元素的DOM。

binding:一个传参对象,包含以下的属性:

value:传递给指令的值。例如:v-focus="1",获取到的值就是 1

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 钩子中可用。

举个例子

javascript 复制代码
<div v-example:foo.bar="baz">

binding参数会是一个这样的对象

javascript 复制代码
{
  arg: 'foo',
  modifiers: { bar: true },//传递的修饰符
  value: /* `baz` 的值 */,
  oldValue: /* 上一次更新时 `baz` 的值 */
}
相关推荐
然我1 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子6 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹9 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器16 分钟前
指定阿里镜像原理
前端
枷锁—sha20 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha22 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜38 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux