技术教程 编程教程 v-debounce-throttle是一个vue防抖节流指令 正文

v-debounce-throttle是一个vue防抖节流指令

2023-05-17,,

v-debounce-throttle是一个vue防抖节流指令

简介

v-debounce-throttle是一个vue防抖节流指令，控制单一事件的触发频率。其核心是拦截组件元素的v-on绑定事件，采用原生的事件注册机制。具体代码如下： 6 起步

安装

npm install v-debounce-throttle -S

引入

import vDebounceThrottle from 'v-debounce-throttle'

Vue.use(vDebounceThrottle)

防抖

<button v-debounce="handleClick"></button>

节流

　<button v-throttle="handleClick"></button>

使用案例 使用方法1

<button v-debounce="handleClick">方法1</button>

使用方法2

<button v-debounce="{fun: 'handleClick', event: 'click', args: 'test'}"></button>

使用方法3

<button v-debounce.dblclick.stop="handleDblclick"></button>

API文档 参数

默认延迟后触发，如若调整顺序，可以设置before、all修饰符 修饰符(modifier) 事件

　   click

　　 dblclick

　　 keyup

　　 keydown

　　 keypress

　　 mousedown

　　 mouseover

　　 mouseleave

　　 scroll 事件修饰符

　　 stop(取消冒泡)

　　 prev(阻止默认事件)

　　 before(防抖延迟前触发)

　　 all(防抖延迟前后都触发)

v-debounce-throttle是一个vue防抖节流指令的相关教程结束。

《v-debounce-throttle是一个vue防抖节流指令.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!