最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢!

    npm地址:https://www.npmjs.com/package/v-debounce-throttle

    github地址:https://github.com/gerryli0214/vue-directives

  使用比较简单,取消利用vue注册事件,采用指令来注册事件,防抖指令v-debounce,节流指令v-debounce,使用方式分为两种,传入对象和采用修饰符,具体文档如下:

默认参数:

参数名称

数据类型

必填

默认值

备注

fun

String

true

event

String

false

click

args

Any

false

wait

Number

false

200

备注:

1、  modifiers为指令修饰符,默认与vue事件绑定保持一致,目前支持的事件类型:click,dblclick,keyup,keydown,keypress,mouseup,mousedown,mouseover,mouseleave,scroll,事件修饰符stop => 阻止默认事件,prev => 阻止事件冒泡

2、  自定义指令默认通过原生JS注册元素事件,在按钮元素上使用的时候,需要移出通过v-on(@)绑定的事件

3、防抖v-debounce,节流v-throttle

使用示例:

方法1:

v-debounce=”funName”

方法2:

v-debounce=”{fun: ‘xxx’, event: ‘xxx’}”

方法3:

v-debounce.click.stop=’funName’

vue防抖节流之v-debounce--throttle使用指南的更多相关文章

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

    v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ...

  2. vue 防抖节流函数——组件封装

    防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 节流(throttle) 所谓节流,就是指连续触发事件但是在 ...

  3. vue防抖节流函数---组件封装,防止按钮多次点击

    1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...

  4. 函数防抖节流的理解及在Vue中的应用

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...

  5. vue 防抖和节流

    函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时. 函数节流(throttle):当持续触 ...

  6. 如何在Vue中优雅的使用防抖节流

    1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...

  7. JS: 防抖节流

    防抖节流 防抖(debounce) 先来看看下面的代码: //触发滚动事件,num 就加1 let num = 0; function incNum() { console.log('鼠标滚动中'); ...

  8. js 防抖 节流 JavaScript

    实际工作中,通过监听某些事件,如scroll事件检测滚动位置,根据滚动位置显示返回顶部按钮:如resize事件,对某些自适应页面调整DOM的渲染:如keyup事件,监听文字输入并调用接口进行模糊匹配等 ...

  9. js debounce & throttle All In One

    js debounce & throttle All In One debounce & throttle js 节流 防抖 debounce 防抖 防抖,是指一个事件触发后在单位时间 ...

随机推荐

  1. Python 中的for....else....

    在一个for循环中,当循环遇到break语句之后程序就会跳出循环,执行for循环之后的语句:但是,当整个循环都没有遇上break语句,而且你想在这种情况下做一些事情的话,你就可以通过结合else来完成 ...

  2. vue订阅者模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 在k8s上安装Jenkins及常见问题

    持续集成和部署是DevOps的重要组成部分,Jenkins是一款非常流行的持续集成和部署工具,最近试验了一下Jenkins,发现它是我一段时间以来用过的工具中最复杂的.一个可能的原因是它需要与各种其它 ...

  4. 百度NLP预训练模型ERNIE2.0最强实操课程来袭!【附教程】

    2019年3月,百度正式发布NLP模型ERNIE,其在中文任务中全面超越BERT一度引发业界广泛关注和探讨.经过短短几个月时间,百度ERNIE再升级,发布持续学习的语义理解框架ERNIE 2.0,及基 ...

  5. Zabbix_agent 三 被动模式的配置

    zabbix一共有三种监控模式分别默认是被动模式,由agent端收集数据,server去请求然后获取agent的数据. 还有就是主动模式,由agent收集数据并定时发送到server端,则就是被动模式 ...

  6. nginx篇最初级用法之SSL虚拟主机

    注意:在源码安装nginx时必须要使用--with-http_ssl_module参数启动加密模块. openssl genrsa > cert.key  //使用openssl自己签发私钥 o ...

  7. [考试反思]0801NOIP模拟测试11

    8月开门红. 放假回来果然像是神志不清一样. 但还是要接受这个事实. 嗯,说好听点,并列rank#7. 说难听点,垃圾rank#18. 都不用粘人名就知道我是哪一个吧... 因为图片不能太长,所以就不 ...

  8. 「考试」weight

    正解是树剖. 首先Kru求最小生成树. 然后分别考虑树边和非树边的答案. 首先是非树边,非树边链接的两个点在MST上能够构成一条链. 这条链上最大的那条边-1就是这条边的答案. 为什么. 模拟Kru的 ...

  9. 20190820 Tue 集训总结&NOIP模拟 27

    低谷度过了? 但是skyh阿卡了,还是反衬出我的辣鸡. T1知道要sort,却忘了判重,正解不如暴力分高,555. T2成功化出正解柿子,然后化过头了,化出了无法DP的柿子. 果然不够强,大神们一眼就 ...

  10. python学习之【第十五篇】:Python中的常用模块之time模块

    1.前言 在Python中,对时间的表示或操作通常要使用到time模块.本篇博文就来记录一下time模块中常用的几种时间表示转换方法. 2. 三种时间表示形式 2.1 时间戳 从1970年1月1日零点 ...