Vue3按钮组件Loading状态最佳实践：优雅的通用解决方案

Vue3按钮组件Loading状态最佳实践：优雅的通用解决方案

前言

在日常Vue3开发中，处理按钮的加载状态是一个非常常见的需求。当用户点击按钮触发异步操作（如API请求）时，我们需要：

1. 显示加载状态，提供视觉反馈
2. 防止重复点击，避免重复请求
3. 操作完成后，自动恢复按钮状态

本文将介绍一个优雅的通用解决方案，基于以下技术栈：

• Vue 3 Composition API
• TypeScript
• Element Plus

传统方案的痛点

传统实现方式

让我们先看一个常见的实现方式：

<template>
  <div>
    <el-button @click="handleClick" :loading="loading">获取数据</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 控制按钮loading状态
const loading = ref(false);

// 模拟异步请求
const fetchData = () => {
  return new Promise<{ code: number; msg: string }>((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        msg: "请求成功",
      });
    }, 3000);
  });
};

// 点击处理函数
const handleClick = async () => {
  loading.value = true;
  try {
    await fetchData();
  } finally {
    loading.value = false;
  }
};
</script>

存在的问题

这种实现方式存在以下几个问题：

1. 状态管理繁琐：每个需要loading状态的按钮都需要单独定义一个loading变量
2. 代码重复：loading状态的切换逻辑在每个点击处理函数中都要重复编写
3. 易出错：如果忘记在finally中重置loading状态，按钮将永远处于加载状态
4. 可维护性差：当项目中有大量按钮时，维护这些loading状态将变得非常困难

优化方案：封装通用按钮组件

我们可以通过封装一个通用的按钮组件来解决这些问题。这个组件将：

• 在内部管理loading状态
• 自动处理异步操作
• 确保loading状态的正确切换

实现代码

<template>
  <el-button
    v-bind="omit(attrs, 'onClick')"
    @click="handleClick"
    :loading="loading"
  >
    <slot></slot>
  </el-button>
</template>

<script setup lang="ts">
import { useAttrs, ref } from "vue";
import { ElButton } from "element-plus";
import { omit } from "lodash-es";

// 禁用属性透传，避免事件重复触发
defineOptions({
  inheritAttrs: false,
});

// 获取所有传入的属性和事件
const attrs = useAttrs();

// 内部维护loading状态
const loading = ref(false);

/**
 * 处理按钮点击事件
 * 1. 自动管理loading状态
 * 2. 执行外部传入的异步回调
 * 3. 确保finally中重置状态
 */
const handleClick = async () => {
  loading.value = true;
  try {
    // 检查并执行外部传入的onClick回调
    if (typeof attrs.onClick === "function") {
      await attrs.onClick();
    }
  } finally {
    // 确保在任何情况下都重置loading状态
    loading.value = false;
  }
};
</script>

关键实现细节

1. 属性透传控制

   defineOptions({
     inheritAttrs: false, // 禁用默认的属性透传
   });
   

   • 为什么？避免事件被触发两次：一次来自v-bind绑定，一次来自默认透传

2. 属性处理

   v-bind="omit(attrs, 'onClick')" // 使用lodash-es的omit方法
   

   • 移除onClick事件：防止重复绑定
   • 保留其他属性：确保按钮的其他属性（如type、size等）正常传递

3. 异步处理

   try {
     await attrs.onClick?.();
   } finally {
     loading.value = false;
   }
   

   • 使用try-finally：确保loading状态一定会被重置
   • 可选链操作符：安全地处理onClick可能不存在的情况

使用示例

基础用法

<template>
  <div class="button-demo">
    <!-- 基础用法 -->
    <MyButton type="primary" @click="handleClick">
      获取数据
    </MyButton>

    <!-- 带图标 -->
    <MyButton type="success" @click="handleClick">
      <template #icon>
        <el-icon><Upload /></el-icon>
      </template>
      上传文件
    </MyButton>

    <!-- 不同尺寸 -->
    <MyButton type="warning" size="small" @click="handleClick">
      小型按钮
    </MyButton>
  </div>
</template>

<script setup lang="ts">
import MyButton from "./components/my-button.vue";
import { ElMessage } from "element-plus";

// 模拟异步请求
const fetchData = () => {
  return new Promise<{ code: number; msg: string }>((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        msg: "操作成功",
      });
    }, 2000);
  });
};

// 业务处理函数 - 只需关注业务逻辑
const handleClick = async () => {
  const res = await fetchData();
  ElMessage.success(res.msg);
};
</script>

<style scoped>
.button-demo {
  display: flex;
  gap: 16px;
}
</style>

组件特点

1. 简单易用

   • 零配置：直接替换 el-button 即可使用
   • 完全兼容：支持所有 Element Plus 按钮属性和事件

2. 自动管理状态

   • 自动处理 loading 状态
   • 防止重复点击
   • 异常情况自动恢复

3. 类型安全

   • 完整的 TypeScript 支持
   • 智能的类型推导

4. 可扩展性

   • 支持所有 Element Plus 按钮插槽
   • 保留原有的属性透传机制

总结

这个通用按钮组件解决方案具有以下优势：

1. 代码简洁：不再需要在每个组件中手动管理 loading 状态
2. 类型安全：完整的 TypeScript 支持，提供更好的开发体验
3. 可维护性：统一的状态管理，降低维护成本
4. 用户体验：自动处理加载状态，防止重复提交

希望这个解决方案能帮助你在 Vue3 项目中更优雅地处理按钮加载状态！