最新封装了一个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. OptimalSolution(2)--二叉树问题(4)子树与拓扑结构

    一.判断t1树是否包含t2树全部的拓扑结构 1 / \ 2 3 2 / \ / \ / \ 4 5 6 7 4 5 / \ / / 8 9 10 8 返回:true 解法(O(M×N)):如果t1中某 ...

  2. mysql免安装包配置

    最近在通过zip包配置mysql,mysql版本:5.7.13.配置过程中,踩了一些坑,下面做了一些简单的记录,配置的具体过程如下: 1.将mysql zip包解压,放到指定目录中,在系统环境变量中配 ...

  3. NPOI 导出 excel 性能测试

    NPOI 导出 excel 性能测试 Intro 网上看到很多人说 NPOI 的性能不行,自己写了一个 NPOI 的扩展库,于是想尝试看看 NPOI 的性能究竟怎么样,道听途说始终不如自己动手一试. ...

  4. Nginx 的请求处理流程,你了解吗?

    之前我们已经讲解了 Nginx 的基础内容,接下来我们开始介绍 Nginx 的架构基础. 为什么我们要讨论 Nginx 的架构基础? 因为 Nginx 运行在企业内网的最外层也就是边缘节点,那么他处理 ...

  5. NOIP模拟测试14

    考完19了再写14,我也是够咕的. 14的题很好,也充分暴露了我的问题. T1是个分析性质推结论的题 对于区间[L,R],不妨设a[L]!=a[R],那么两个端点对答案没有贡献,也就是[L+1,R], ...

  6. ElasticSearch(五):Mapping和常见字段类型

    ElasticSearch(五):Mapping和常见字段类型 学习课程链接<Elasticsearch核心技术与实战> 什么是Mapping Mapping类似数据库中的schema的定 ...

  7. Python实现王者荣耀小助手(一)

    简单来说网络爬虫,是指抓取万维网信息的程序或者脚本,Python在网络爬虫有很大优势,今天我们用Python实现获取王者荣耀相关数据,做一个小助手: 前期准备,环境搭建: Python2.7 sys模 ...

  8. 聚类——密度聚类DBSCAN

    Clustering 聚类 密度聚类——DBSCAN 前面我们已经介绍了两种聚类算法:k-means和谱聚类.今天,我们来介绍一种基于密度的聚类算法——DBSCAN,它是最经典的密度聚类算法,是很多算 ...

  9. 生活问题 | 对华为畅玩手机5X进行升级

    步骤一:准备一张SD卡,建议使用Sandisk, Kingstone, 或Kingmax,大小建议在2G KIW-AL10C00B258 软件版本升级指导书 Secret  2016-11-25 Hu ...

  10. python经典算法题:Z字变形

    题目 直接看图! 思路第一步:分组 我们把传入的字符串进行分组, 每个框内的字母为1组: 我们发现每个相同颜色的框内的一组字母的特点是在传入的字符串中是连续的: 我们还发现每组字母的个数是由numRo ...