SwButton

SwButton 是框架提供的基础按钮组件。在原生 <button> 的基础上封装了 loading 状态机（含默认 spinner）、禁用状态和 icon 渲染逻辑，所有 HTML 属性（class、style、aria-*）通过 inheritAttrs 自动透传到原生 <button>，API 完全跟 vue idiom 对齐：标准 @click event + :loading / :disabled props。

异步必配 :loading：SwButton 不内置节流（跟 element-plus / antd / mui / reka-ui 等业界对齐），异步场景用 @click event + 父组件 :loading 状态机防 double-submit（详见 standards/usage-review-rules.md Rule SB-001）。

基础用法

通过标准 @click event 绑定点击回调。

异步操作（必配 ）

异步 handler 期间，父组件必须管 :loading 状态机，否则用户能在 await 期间再点 → double-submit。

禁用状态

通过 :disabled="true" 禁用按钮。禁用状态下按钮不可点击，disabled 属性也会同步到原生 <button>，CSS :disabled 伪类选择器可正常使用。

语义类型

通过 type prop 传入语义类型，组件会输出为 data-type HTML 属性，不内置任何颜色样式。项目通过 CSS 属性选择器自行定义各类型的视觉风格：

<SwButton type="primary" @click="submit">提交</SwButton>
<SwButton type="danger" @click="remove">删除</SwButton>

/* 项目自定义样式（applier CSS token） */
.sw-button[data-type="primary"] { background: var(--primary); }
.sw-button[data-type="danger"]  { background: var(--destructive); }

Form 提交按钮

通过 native-type="submit" 让 button 触发 form submit 行为（原生 HTML5 表单校验、Enter 键提交等）。

<form @submit.prevent="onLogin">
  <input v-model="username" required>
  <input v-model="password" type="password" required>
  <SwButton native-type="submit" :loading="submitting" type="primary">
    登录
  </SwButton>
</form>

图标按钮

通过 :icon prop 传入 Vue 组件作为左侧图标，loading 时会被 spinner 自动替换。

<script setup>
import { PhFloppyDisk, PhTrash } from '@phosphor-icons/vue'
</script>

<template>
  <SwButton :icon="PhFloppyDisk" @click="save" :loading="saving">保存</SwButton>
  <SwButton :icon="PhTrash" type="danger" @click="remove">删除</SwButton>
</template>

也可以用 #icon slot（跟 :icon prop 互斥，prop 优先）：

<SwButton @click="next">
  下一步
  <template #icon-right>→</template>
</SwButton>

Loading Spinner

:loading="true" 时显示默认 spinner（约 10 行 CSS，框架功能性必需的最小视觉）。spinner 使用 1em 尺寸 + currentColor 颜色，自动跟随按钮文字大小和颜色，无需 applier 额外适配。

不满意默认 spinner 视觉？两种 override 方式：

1. CSS override（改颜色 / 大小 / 动画）：

.sw-button-spinner {
  border-color: #fff #fff transparent;  /* 改成白色 spinner */
  width: 1.2em;                          /* 改尺寸 */
  animation-duration: 0.5s;              /* 改动画速度 */
}

2. #loading slot 完全替换：

<SwButton @click="upload" :loading="uploading">
  <template #loading>
    <MyCustomSpinner />
  </template>
  上传
</SwButton>

点击埋点（:track）

:track 是 opt-in 内置点击埋点（不传零行为）：{ click: { event, payload } } 点击时经 useTracker 上报，disabled / loading 期不触发；event 限 WebSdkEvent 联合类型（typo 被 TS 拦）。自有打点 SDK 直接用 @click（逃生舱）。业务字段口径与 SwLink :track 一致（同元素曝光 / 点击字段须一致，见 standards SL-003）。

<SwButton
  :track="{ click: { event: 'appPageitemClick', payload: {
    item_id: '123', item_type: 'video', item_name: '片名',
    parent_item_id: '', position: 1, page_key: 'home', page_name: '首页',
  } } }"
  @click="play"
>
  播放
</SwButton>

Props

Events

Slots

注意事项

• API 是标准 vue event：<SwButton @click="fn"> 跟原生 <button @click="fn"> 一致，不再吞掉 @click。
• 异步必配 :loading：framework 不再内置节流（业界主流不做），async 期间防 double-submit 的责任由父组件管 :loading 状态机。standards/usage-review-rules.md Rule SB-001 强制要求。
• form 提交按钮必传 native-type="submit"：默认 'button' 不触发 form submit。详见 Rule SB-002。
• 纯样式 prop 不内置：size / plain / round / circle / color 等 el-button 视觉装饰 prop 都不做，applier 用 CSS class 自管（如 <SwButton class="text-sm rounded-full">）。