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

📋 前言

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

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

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

⚡ Vue 3 Composition API
🎯 TypeScript
🔥 Element Plus

🤔 传统方案的痛点

传统实现方式

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

vue 复制代码

<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>

存在的问题

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

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

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

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

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

实现代码

vue 复制代码

<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>

关键实现细节

属性透传控制
ts 复制代码
```
defineOptions({
  inheritAttrs: false, // 禁用默认的属性透传
});
```
- 为什么？避免事件被触发两次：一次来自v-bind绑定，一次来自默认透传
属性处理
ts 复制代码
```
v-bind="omit(attrs, 'onClick')" // 使用lodash-es的omit方法
```
- 移除onClick事件：防止重复绑定
- 保留其他属性：确保按钮的其他属性（如type、size等）正常传递
异步处理
ts 复制代码
```
try {
  await attrs.onClick?.();
} finally {
  loading.value = false;
}
```
- 使用try-finally：确保loading状态一定会被重置
- 可选链操作符：安全地处理onClick可能不存在的情况

🎯 使用示例

基础用法

vue 复制代码

<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>

🌟 组件特点

简单易用
- 零配置：直接替换 el-button 即可使用
- 完全兼容：支持所有 Element Plus 按钮属性和事件
自动管理状态
- 自动处理 loading 状态
- 防止重复点击
- 异常情况自动恢复
类型安全
- 完整的 TypeScript 支持
- 智能的类型推导
可扩展性
- 支持所有 Element Plus 按钮插槽
- 保留原有的属性透传机制

🎉 总结

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

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

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

🔔 提示：如果你觉得这个组件对你有帮助，欢迎点赞收藏，如有问题也欢迎在评论区讨论！