项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
双端兼容 · 桌面 + 移动

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 | infodefault
size尺寸small | default | largedefault
plain朴素按钮booleanfalse
round / circle圆角 / 圆形booleanfalse
text / link文字按钮 / 链接按钮booleanfalse
ghost幽灵按钮(透明底)booleanfalse
disabled / loading禁用 / 加载(两者均阻断 click)booleanfalse
icon图标名(registry)或图标组件,颜色随按钮文字色string | Component—
iconPosition图标位置:left 文本左侧(默认)/ right 文本右侧(如「下一页 →」)left | rightleft
nativeType原生 type 属性button | submit | resetbutton
autofocus自动聚焦booleanfalse
dangerSolid危险实心(danger 时红色更实)booleanfalse

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 子按钮,相邻按钮边框合并、仅首尾保留圆角——