Button 按钮
按钮组件，用于触发操作或提交表单。
基础用法
带图标
通过 #icon 插槽或 icon prop 添加图标。
加载状态
禁用状态
块级按钮
尺寸
颜色变体
视觉变体
组合使用
API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | '' | 按钮文字 |
variant | 'filled' | 'outline' | 'filled' | 视觉变体 |
color | 'primary' | 'success' | 'warning' | 'error' | 'primary' | 主题色 |
size | 'sm' | 'md' | 'lg' | 'md' | 按钮尺寸 |
disabled | boolean | false | 是否禁用 |
loading | boolean | false | 是否加载中 |
block | boolean | false | 是否为块级（宽度 100%） |
icon | string | Component | — | 图标（字符串或 Vue 组件） |
Slots
| 名称 | 说明 |
|---|---|
default | 按钮文字（优先级高于 label prop） |
icon | 左侧图标内容（优先级高于 icon prop） |
Events
| 事件 | 参数 | 说明 |
|---|---|---|
click | (event: MouseEvent) | 点击回调（禁用或加载时不会触发） |
注意事项
labelprop 与默认插槽同时存在时，默认插槽优先iconprop 与#icon插槽同时存在时，插槽优先loading状态下，按钮自动禁用，图标和文字会被加载动画替代iconprop 支持传入 Vue 组件（如:icon="IconHome"）或字符串（如icon="✓"）