Lake's Blog Lake's Blog
首页
HCFrame
  • 博客搭建

    • 搜索引擎
    • SEO优化
    • 问题记录
  • Vue

    • 问题记录
  • uni-app
  • 开发

    • Spring
  • 数据库及中间件

    • Elasticsearch
    • SQL
  • 杂谈

    • 杂谈
  • 微服务

    • nacos
    • CAS
  • 算法说明

    • algorithm
  • leetCode

    • leetCode
  • 代理

    • Nginx
  • Linux

    • ubuntu
  • Docker
  • 数据库
  • 消息队列
  • openwrt
  • 友情链接
关于
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub

Lake Liu

很菜的程序员
首页
HCFrame
  • 博客搭建

    • 搜索引擎
    • SEO优化
    • 问题记录
  • Vue

    • 问题记录
  • uni-app
  • 开发

    • Spring
  • 数据库及中间件

    • Elasticsearch
    • SQL
  • 杂谈

    • 杂谈
  • 微服务

    • nacos
    • CAS
  • 算法说明

    • algorithm
  • leetCode

    • leetCode
  • 代理

    • Nginx
  • Linux

    • ubuntu
  • Docker
  • 数据库
  • 消息队列
  • openwrt
  • 友情链接
关于
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub
  • 博客搭建

  • VUE

    • 问题记录

      • 前端传值不能带中括号???
      • Vue中使用debounce防抖基于Typescript
        • 一、抽象组件使用方式
          • 1、封装抽象组件(debounce.js 文件)
          • 2、组件使用方式
        • 二、普通使用方式
          • 1、安装并引入 lodash 库,直接使用。
        • 原文地址
      • Vue-typescript项目兼容IE浏览器
      • Vue-typescript Long类型失去精度
      • Vue-typescript 打包成app后如何自动更新
      • Vue typescript 如何极限压缩编译静态资源
  • UNIAPP

Vue中使用debounce防抖基于Typescript

# Vue中使用debounce防抖基于Typescript

# 一、抽象组件使用方式

# 1、封装抽象组件(debounce.js 文件)

import Vue from 'vue'

const debounce = (func, time, ctx, immediate) => {
  let timer
  const rtn = (...params) => {
    clearTimeout(timer)

    if (immediate) {
      let callNow = !timer
      timer = setTimeout(() => {
        timer = null
      }, time)
      if (callNow) func.apply(ctx, params)
    } else {
      timer = setTimeout(() => {
        func.apply(ctx, params)
      }, time)
    }
  }
  return rtn
}

Vue.component('Debounce', {
  abstract: true,
  props: ['time', 'events', 'immediate'],
  created() {
    this.eventKeys = this.events && this.events.split(',')
  },
  render() {
    const vnode = this.$slots.default[0]

    // 如果默认没有传 events,则对所有绑定事件加上防抖
    if (!this.eventKeys) {
      this.eventKeys = Object.keys(vnode.data.on)
    }

    this.eventKeys.forEach(key => {
      vnode.data.on[key] = debounce(
        vnode.data.on[key],
        this.time,
        vnode,
        this.immediate
      )
    })

    return vnode
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# 2、组件使用方式

  • 引入全局组件

    首先需要将 debounce.js 文件在入口文件(main.ts)中全局引入。当然也可以按照需要修改 debounce.js 文件,按需引入。

import Vue from 'vue'
import App from './App.vue'
...
import '@/xxx/debounce'
1
2
3
4
  • 在模版中使用

    其中time为必选参数。 event 和 immediate 参数都是可选参数。

    如果组件下有多个事件绑定,那么 event 可以自定义需要进行防抖处理的事件。

    如果需要立即执行的话,可以将 immediate 参数设置为 true。

<template>
  <div>
    <Debounce :time="500" :immediate="true" events="click,mousemove">
      <button @click="print(123)" @mousemove="print2(123)" style="width: 500px;height: 500px">点击我</button>
    </Debounce>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Test extends Vue {
  print(v: number) {
    console.log(v)
  }
  
  print2(v: number) {
    console.log(v)
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 二、普通使用方式

# 1、安装并引入 lodash 库,直接使用。

<template>
  <div>
    <button
      @click="clickButton(123)"
      @mousemove="clickButton(123)"
      style="width:500px;height: 500px"
    >click me!</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import * as _ from 'lodash'

export default class Service extends Vue {
  private clickButton = _.debounce(this.print, 500, {
    leading: true,
    trailing: false
  })

  private print(v: number) {
    console.log(v)
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 原文地址

Vue中使用debounce防抖(ts)

编辑
#前端#Vue
上次更新: 2023/03/24, 08:53:10
前端传值不能带中括号???
Vue-typescript项目兼容IE浏览器

← 前端传值不能带中括号??? Vue-typescript项目兼容IE浏览器→

最近更新
01
IDEA行号太宽
03-11
02
uniapp中实现h5扫码功能(微信版)
08-12
03
Docker安装Rabbitmq
07-22
更多文章>
本站总访问量次 | 您是本站第位访问者
Theme by Vdoing | Copyright © 2020-2024 Lake Liu | MIT License | 背景图、Logo、头像设计@Drrizzee
  • 跟随系统
  • 深色模式
  • 浅色模式
  • 阅读模式