Button 按钮
常用的操作按钮:default / primary / success / warning / danger / info 六种语义类型,支持 plain / round / circle / text / link / ghost / loading 等形态,图标颜色自动跟随按钮文字色(primary 按钮内图标呈白色)。disabled 与 loading 状态下点击不触发 click 事件;loading 时前导图标被替换为旋转图标并锁定宽度避免抖动。
基础用法
type 决定语义色,缺省为 default。
朴素 / 圆角 / 圆形
plain 朴素底色,round 全圆角,circle 圆形(常与纯图标搭配)。
图标
icon 传 registry 图标名(或图标组件),图标颜色随按钮文字色自动变化:实心类型内为白色,plain / default 内为主题色或常规色。
禁用与加载
disabled 禁用点击,loading 展示旋转图标并同样阻断点击;loading 时插槽内的前导图标会被自动移除,避免双图标并列。
点击触发加载
loading 通常由异步请求驱动:点击后置 true,请求结束置 false,期间按钮不可重复点击。
尺寸
size 控制高度与内边距,图标字号随之缩放(large 16px / default 14px / small 12px)。
文字与链接按钮
text 无底色文字按钮(适合表格操作列),link 链接样式按钮;两者均可叠加 type 语义色与 icon。
幽灵与危险实心
ghost 幽灵按钮透明底(适合深色背景),danger-solid 让 danger 按钮红色更实,用于强危险操作。
按钮组
eb-button-group 包裹的按钮连为一个整体(相邻边框合并、圆角只保留首尾)。成对出现的操作(如上一页 / 下一页)建议图标朝外:默认 icon-position="left",第二枚按钮传 icon-position="right" 让图标落到文本右侧。
API
Button Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 按钮类型 | default | primary | success | warning | danger | info | default |
| size | 尺寸 | small | default | large | default |
| plain | 朴素按钮 | boolean | false |
| round / circle | 圆角 / 圆形 | boolean | false |
| text / link | 文字按钮 / 链接按钮 | boolean | false |
| ghost | 幽灵按钮(透明底) | boolean | false |
| disabled / loading | 禁用 / 加载(两者均阻断 click) | boolean | false |
| icon | 图标名(registry)或图标组件,颜色随按钮文字色 | string | Component | — |
| iconPosition | 图标位置:left 文本左侧(默认)/ right 文本右侧(如「下一页 →」) | left | right | left |
| nativeType | 原生 type 属性 | button | submit | reset | button |
| autofocus | 自动聚焦 | boolean | false |
| dangerSolid | 危险实心(danger 时红色更实) | boolean | false |
Button Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| click | 点击触发(disabled / loading 时不触发) | (e: MouseEvent) => void | — |
Button Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 按钮内容;loading 时前导图标会被替换为旋转图标 | — | — |
Button Methods
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| ref | 原生 button 元素引用(可透传 focus / blur 等) | HTMLElement | — |
| focus | 聚焦按钮 | () => void | — |
| blur | 失焦按钮 | () => void | — |
ButtonGroup API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default(slot) | 包裹 eb-button 子按钮,相邻按钮边框合并、仅首尾保留圆角 | — | — |