Button / LoadingButton 按钮

基于 Element Plus Button 封装的按钮组件。onClick 只需返回 Promise，按钮即自动进入 loading 状态并禁用点击，从源头防止重复提交。

基础用法

import { defineComponent } from 'vue'
import LoadingButton from '@/components/Button'
import { ElMessage as message } from 'element-plus'

export default defineComponent({
  name: 'DemoButtonBasic',
  setup() {
    return () => (
      <div class="demo-block">
        <div style="display:flex; flex-direction:column; gap:16px;">

          <div style="font-size:13px; color:#666; line-height:1.6;">
            <strong>自动防止重复点击：</strong>onClick 只需返回 Promise，按钮会自动进入 loading 状态并禁用点击，直到异步操作完成。
          </div>

          <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
            <LoadingButton onClick={() => message.info('点击了普通按钮')}>
              普通按钮（同步）
            </LoadingButton>

            <LoadingButton
              type="primary"
              onClick={async () => {
                await new Promise((r) => setTimeout(r, 2000))
                message.success('2 秒后加载完成')
              }}
            >
              异步按钮（自动 loading）
            </LoadingButton>

            <LoadingButton
              type="primary"
              onClick={async () => {
                await new Promise((r) => setTimeout(r, 3000))
                message.success('3 秒后加载完成')
              }}
            >
              再点一下试试（3s）
            </LoadingButton>

            <LoadingButton type="success" onClick={() => message.success('成功操作')}>
              成功按钮
            </LoadingButton>

            <LoadingButton type="warning" confirm="确认执行此操作？" onClick={() => message.info('已确认')}>
              二次确认
            </LoadingButton>

            <LoadingButton type="danger" disabled>
              禁用按钮
            </LoadingButton>
          </div>

        </div>
      </div>
    )
  },
})

LoadingButton Props

属性名	类型	默认值	说明
onClick	(e: MouseEvent) => Promise\<any\> | void	—	点击回调。返回 Promise 时自动 loading 并禁用重复点击
confirm	string	—	二次确认文案，设置后点击先弹出 Popconfirm
type	string	'primary'	按钮类型：default、primary、success、warning、danger 等
size	string	—	按钮尺寸：large、default、small

其余 props（disabled、loading 等）继承自 Element Plus Button。

防止重复点击

只需让 onClick 返回一个 Promise，无需额外代码：

// ✅ 自动 loading，防止重复点击
<LoadingButton
  onClick={async () => {
    await submitData()
    message.success('提交成功')
  }}
>
  提交
</LoadingButton>

// ❌ 同步回调，不触发 loading
<LoadingButton
  onClick={() => {
    message.info('普通操作')
  }}
>
  普通按钮
</LoadingButton>

按钮在 Promise pending 期间显示 loading 动画且不可点击，Promise resolve/reject 后自动恢复。

二次确认

<LoadingButton
  type="danger"
  confirm="确定要删除吗？"
  onClick={async () => {
    await deleteData()
    message.success('删除成功')
  }}
>
  删除
</LoadingButton>

设置 confirm 后，点击先弹出 Popconfirm 确认框，确认后再执行 onClick。