zoukankan      html  css  js  c++  java
  • vue防抖节流之v-debounce-throttle使用指南

      最新封装了一个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’

  • 相关阅读:
    浅谈js的继承
    Android调用jni全过程,方便以后操作
    oracle中查找执行效率低下的SQL
    EBS R12 怎么修改APPS密码
    oracle查看系统资源占用情况
    ramfs
    091104 晴
    周六
    注意调整
    短信收到
  • 原文地址:https://www.cnblogs.com/gerry2019/p/11962009.html
Copyright © 2011-2022 走看看