最新封装了一个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. 关于微信oauth登录的坑

    这是实习公司里微信公众号的一个小项目,用的是ssm.问题是获取用户openid为空. 分析下步骤 首先用户点击微信公众号按钮 访问微信服务器获取code 跳转到项目url 拿code访问微信服务器,获 ...

  2. unity text实现鼠标光标

    由于项目需求,需要在text上实现鼠标的cursor,并且随着点击位置cursor移动.实现方法: 1)新建一个光标的prefab(简单为之,直接在image中添加一个竖线spirte),增加脚本控制 ...

  3. python之ORM(对象关系映射)

    实现了数据模型与数据库的解耦,通过简单的配置就可以轻松更换数据库,而不需要更改代码.orm操作本质上会根据对接的数据库引擎,翻译成对应的sql语句.所有使用Django开发的项目无需关心程序底层使用的 ...

  4. 2017.12.21 学习vue的新得

    温故而知新,这句话说的真的有道理.每次回顾vue总会学到不一样的知识点,我就在想,我第一遍到底看了什么? 废话不多说,简要记录今天的所得: 1.v-if 与 v-show 同:都是条件渲染 异:渲染的 ...

  5. ios Autolayout 按比例相对布局

    看到一篇讲ios storyboard 按比例相对布局的博客,挺不错的转下来了! 可到liumh.com查看. 本文记录如何在 UIStoryboard 或者 xib 中进行百分比布局,包括 View ...

  6. 通俗地说逻辑回归【Logistic regression】算法(一)

    在说逻辑回归前,还是得提一提他的兄弟,线性回归.在某些地方,逻辑回归算法和线性回归算法是类似的.但它和线性回归最大的不同在于,逻辑回归是作用是分类的. 还记得之前说的吗,线性回归其实就是求出一条拟合空 ...

  7. 零基础攻略!如何使用kubectl和HPA扩展Kubernetes应用程序

    现如今,Kubernetes已经完全改变了软件开发方式.Kubernetes作为一个管理容器化工作负载及服务的开源平台,其拥有可移植.可扩展的特性,并促进了声明式配置和自动化,同时它还证明了自己是管理 ...

  8. Spring Boot实战之定制type Formatters

    本文首发于个人网站:Spring Boot实战之定制type Formatters 前面我们有篇文章介绍了PropertyEditors,是用来将文本类型转换成指定的Java类型,不过,考虑到Prop ...

  9. [UWP]使用SpringAnimation创建有趣的动画

    1. 什么是自然动画 最近用弹簧动画(SpringAnimation)做了两个番茄钟,关于弹簧动画官方文档已经介绍得够详细了,这篇文章就摘录一些官方文档核心内容. 在传统UI中,关键帧动画(KeyFr ...

  10. CSP-S 94 (sb lsc gc赛)

    不要问我为什么题解倒着写,因为在填坑! 关于这场比赛就是我sb的再现 考完试旁边_LH叱的一声说道:“lsc真**垃圾”; lsc:........确实很垃圾! ------------------- ...