Vue3+TS封装全局按钮防抖函数

小灰灰 2023-10-13 05:26 26阅读 0赞

在Vue3 + TS项目中，我们经常需要对一些按钮进行防抖处理，以避免用户频繁点击而导致的性能问题。因此，我们可以封装一个全局的按钮防抖函数来简化代码，提高开发效率。

### 实现步骤 ###

1.  创建 `src/utils/debounce.ts` 文件。
2.  在 `debounce.ts` 文件中，引入 `lodash` 库，并编写防抖函数。
    
        import _ from 'lodash';
        
        export function debounce<T extends (...args: any[]) => any>(
          fn: T,
          delay: number = 300
        ): T {
              
          return _.debounce(fn, delay, {
               leading: true, trailing: false }) as T;
        }
3.  在 `src/main.ts` 文件中，将防抖函数挂载到 Vue 实例的原型上，以便在全局使用。
    
        import {
               createApp } from 'vue';
        import App from './App.vue';
        import {
               debounce } from './utils/debounce';
        
        const app = createApp(App);
        
        app.config.globalProperties.$debounce = debounce;
        
        app.mount('#app');
4.  在页面中使用 `$debounce` 函数进行按钮防抖。
    
        <template>
          <button @click="$debounce(() => handleClick(), 500)">点击</button>
        </template>
        
        <script lang="ts">
        import {
               defineComponent } from 'vue';
        
        export default defineComponent({
              
          methods: {
              
            handleClick() {
              
              console.log('按钮被点击了');
            },
          },
        });
        </script>

### 总结 ###

通过以上步骤，我们便可以在 Vue3 + TS 项目中快速实现全局按钮防抖函数，提高代码的复用性和开发效率。

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3+ts封装全局防抖函数

什么是防抖节流？函数防抖（debounce）：是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，（例

不念不忘少年蓝@/ 2024年03月16日 23:52/ 0 赞/ 71 阅读

相关 Vue3+element-ui + TS封装全局分页组件

本文介绍了如何使用Vue3、element-ui和TypeScript封装一个全局分页组件。环境依赖在开始之前，你需要安装以下环境： Vue3 ele

缺乏、安全感/ 2023年10月13日 11:57/ 0 赞/ 31 阅读

相关 Vue + TS 封装全局自定义指令

在 Vue 中，指令是一种特殊的语法，用于在 DOM 元素上添加特定的行为。Vue 提供了许多内置指令，如 `v-if`、`v-for`、`v-bind` 等，但是在实际开发中

不念不忘少年蓝@/ 2023年10月13日 10:11/ 0 赞/ 35 阅读

相关 Vue + TS 封装全局性别转换函数

当我们需要在Vue项目中进行性别的转换时，我们可以封装一个全局性别转换函数，让其可以在项目的任何地方使用。本文介绍如何使用TypeScript和Vue来实现这个功能。我们可

冷不防/ 2023年10月13日 08:32/ 0 赞/ 62 阅读

相关 Vue + TS封装全局搜索组件

本文介绍了如何使用Vue和TypeScript封装一个全局搜索组件。该组件可以方便地在Vue项目中使用，帮助用户快速定位所需信息。组件功能该全局搜索组件具有以下功能

Dear 丶/ 2023年10月13日 08:32/ 0 赞/ 27 阅读

相关 Vue + TS封装全局表格组件

在Vue项目中，我们经常需要使用表格来展示数据。为了提高代码复用性和开发效率，我们可以封装一个全局表格组件，方便在各个页面中使用。本文将介绍如何使用Vue和TypeScript

素颜马尾好姑娘i/ 2023年10月13日 08:32/ 0 赞/ 82 阅读

相关 Vue + TS封装全局分页组件

在Vue3项目中，我们常常会用到分页组件。为了方便复用和统一样式，我们可以封装一个全局的分页组件。实现思路 1. 定义一个Pagination组件，包含分页逻辑和样

素颜马尾好姑娘i/ 2023年10月13日 05:29/ 0 赞/ 30 阅读

相关 Vue3+TS封装全局按钮防抖函数

在Vue3 + TS项目中，我们经常需要对一些按钮进行防抖处理，以避免用户频繁点击而导致的性能问题。因此，我们可以封装一个全局的按钮防抖函数来简化代码，提高开发效率。实现

小灰灰/ 2023年10月13日 05:26/ 0 赞/ 27 阅读

相关 vue3+ts封装全局节流和防抖函数

在Vue3 + TypeScript项目中，为了优化性能，经常需要使用节流和防抖函数来控制函数的执行频率。这里我们可以封装全局的节流和防抖函数，方便在整个项目中使用。封装

青旅半醒/ 2023年10月12日 22:56/ 0 赞/ 27 阅读

相关 Vue——按钮防抖

Vue——按钮防抖按钮多次点击，只执行点击动作完成的一次事件触发 1.创建utils/once.js文件 export const Debounce =

╰半橙微兮°/ 2022年10月14日 11:56/ 0 赞/ 226 阅读