zoukankan      html  css  js  c++  java
  • v-debounce 防抖节流

     1 简介
     2 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率。其核心是拦截组件元素的v-on绑定事件,采用原生的事件注册机制。具体代码如下: 6 起步
     7 安装
     8 npm install v-debounce-throttle -S
     9 引入
    10 import vDebounceThrottle from 'v-debounce-throttle'
    11 Vue.use(vDebounceThrottle)
    12 示例
    13 防抖
    14 <button v-debounce="handleClick"></button>
    15 节流
    16 <button v-throttle="handleClick"></button>
    17 使用案例
    18 使用方法1
    19 <button v-debounce="handleClick">方法1</button>
    20 使用方法2
    21 <button v-debounce="{fun: 'handleClick', event: 'click', args: 'test'}"></button>
    22 使用方法3
    23 <button v-debounce.dblclick.stop="handleDblclick"></button>
    24 API文档
    25 参数
    26 
     
    27 默认延迟后触发,如若调整顺序,可以设置before、all修饰符
    28 
    29 修饰符(modifier)
    30 事件
    31 click
    32 dblclick
    33 keyup
    34 keydown
    35 keypress
    36 mousedown
    37 mouseover
    38 mouseleave
    39 scroll
    40 事件修饰符
    41 stop(取消冒泡)
    42 prev(阻止默认事件)
    43 before(防抖延迟前触发)
    44 all(防抖延迟前后都触发)

    如自己封装参考博客https://blog.csdn.net/userkang/article/details/101448707

  • 相关阅读:
    第二次作业
    第一次作业
    第五次作业
    第四次作业
    第三次作业
    第二次作业
    第一次作业
    HTML标签分类
    HTML属性与事件的搭配使用
    HTML全局属性和全局事件属性
  • 原文地址:https://www.cnblogs.com/huoshengmiao/p/14958661.html
Copyright © 2011-2022 走看看