v-throttle

    1.0.3 • Public • Published

    v-throttle

    Vue 节流指令

    用法

    1、引入

    import Vue from "vue";
    import VThrottle from "v-throttle";
    
    Vue.use(VThrottle, {
      // 指令名称,可选,默认为 `v-throttle`
      name: "v-throttle",
      // 全局延时,可选,默认为 1000
      time: 3000,
      // 是否展示调试相关的信息,默认为false,不展示。注意:报错信息不会被关闭
      dev: true,
    });

    2、指定单个事件

    <template>
      <!-- 默认事件为 onclick,默认延时为全局延时 -->
      <button v-throttle="handler">点击</button>
    
      <!-- 指定事件 -->
      <button v-throttle.touch="handler">点击</button>
    
      <!-- 指定事件和时间 -->
      <button v-throttle.touch.300="handler">点击</button>
    
      <!-- 若绑定多个延时,则始终生效后面的延时 -->
      <button v-throttle.click.3000.2000="handler">点击</button>
    </template>
    
    <script>
    export default {
      methods: {
        handler() {
          console.log("run");
        },
      },
    };
    </script>

    3、指定多个事件

    <template>
      <!-- 同时绑定使用全局延迟时间的点击事件和鼠标悬浮事件 -->
      <button v-throttle.click.mouseover="handler">点击</button>
    
      <!-- 同时绑定 1000ms 延迟的点击事件和使用全局延迟时间的鼠标悬浮事件 -->
      <button v-throttle.1000.mouseover="handler">点击</button>
    
      <!-- 同时绑定 3000ms 延迟的点击事件和 2000ms 延迟的鼠标悬浮事件 -->
      <button v-throttle.click.3000.mouseover.2000="handler">点击</button>
    
      <!-- 同一指令下绑定的不同事件之间的延时器默认是共用的,若需要独立延时,需配置 private 属性 -->
      <button v-throttle.click.3000.private.mouseover.2000="handler">点击</button>
    </template>
    
    <script>
    export default {
      methods: {
        handler() {
          console.log("run");
        },
      },
    };
    </script>

    支持事件

    在使用移动端的 touch 事件时,若绑定事件为 touch,则会警告(可配置关闭),并转换成 touchend

    元素所支持的事件都可以进行节流限制,若该元素无对应的事件,则会抛出错误

    注意事项

    由于指令的底层机制,需要对事件的处理方式进行传参时,需要使用另外一个函数进行包裹

    <template>
      <!-- 若带上touch参数可以将touch事件加入节流 -->
      <button v-throttle.touch.300="() => handler(111)">点击</button>
    </template>
    
    <script>
    export default {
      methods: {
        handler(params) {
          console.log("run", params);
        },
      },
    };
    </script>

    Install

    npm i v-throttle

    DownloadsWeekly Downloads

    8

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    12.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • hn-failte