Button 按钮
常用的操作按钮。
基础用法
使用 type 属性来定义按钮的类型。
基础用法
朴素按钮
使用 plain 属性可以设置为朴素按钮。
朴素按钮
圆角按钮
使用 round 属性可以设置为圆角按钮。
圆角按钮
圆形按钮
使用 circle 属性来设置圆形按钮，通常用于只包含图标的按钮。
圆形按钮
禁用状态
使用 disabled 属性来控制按钮的禁用状态。
禁用状态
加载状态
使用 loading 属性来控制按钮的加载状态。
加载状态
不同尺寸
使用 size 属性来设置按钮的尺寸。
不同尺寸
文字按钮
使用 text 属性可以设置为文字按钮。
文字按钮
链接按钮
使用 link 属性可以设置为链接样式按钮。
链接按钮
块级按钮
使用 block 属性可以设置为块级按钮，宽度占满容器。
块级按钮
自定义颜色
使用 color 属性可以自定义按钮颜色。
自定义颜色
图标位置
通过 icon-position 属性可以控制图标相对于文字的位置。支持 left (默认), right, top, bottom。
图标位置
在 Nuxt 中使用
Button 组件完全支持 Nuxt 3/4 的 SSR 渲染。在 Nuxt 项目中使用时，组件会自动导入，无需手动注册。
Nuxt 中使用
SSR 注意事项：
- ✅ 所有 Props 和样式完全支持
- ✅ 事件绑定正常工作
- ✅ 插槽内容完整渲染
- ✅ 动态状态（loading、disabled 等）
- ⚠️
autofocus属性仅客户端生效
SSR 安全性
Button 组件已通过完整的 SSR 测试，确保服务端和客户端渲染完全一致。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 按钮类型 | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default' |
| size | 按钮尺寸 | 'large' | 'default' | 'small' | 'default' |
| disabled | 是否禁用 | boolean | false |
| loading | 是否加载中 | boolean | false |
| plain | 是否为朴素按钮 | boolean | false |
| round | 是否为圆角按钮 | boolean | false |
| circle | 是否为圆形按钮 | boolean | false |
| text | 是否为文字按钮 | boolean | false |
| link | 是否为链接按钮 | boolean | false |
| block | 是否为块级按钮 | boolean | false |
| native-type | 原生 type 属性 | 'button' | 'submit' | 'reset' | 'button' |
| autofocus | 是否自动聚焦 | boolean | false |
| icon | 左侧图标组件 | string | Component | — |
| suffix-icon | 右侧图标组件 | string | Component | — |
| icon-position | 图标位置 | 'left' | 'right' | 'top' | 'bottom' | 'left' |
| color | 自定义按钮颜色 | string | — |
| tag | 自定义元素标签 | string | Component | 'button' |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击按钮时触发 | (event: MouseEvent) => void |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 按钮内容 |
| icon | 自定义内容 (受 icon-position 影响) |
| suffixIcon | 独立后缀插槽 (固定在右侧) |
| loading | 自定义加载图标 |
Expose
| 属性名 | 说明 | 类型 |
|---|---|---|
| ref | 按钮 DOM 元素引用 | HTMLButtonElement | undefined |
| size | 计算后的实际尺寸 | ButtonSize |
| type | 按钮类型 | ButtonType |
| disabled | 是否禁用状态 | boolean |
主题变量
Button 组件支持通过覆盖以下 CSS 变量来自定义局部样式：
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-button-bg-color | 按钮背景颜色 | var(--yh-fill-color-blank) |
--yh-button-text-color | 按钮文字颜色 | var(--yh-text-color-regular) |
--yh-button-border-color | 按钮边框颜色 | var(--yh-border-color) |
--yh-button-hover-bg-color | 悬停状态背景颜色 | var(--yh-color-primary-light-9) |
--yh-button-hover-text-color | 悬停状态文字颜色 | var(--yh-color-primary) |
--yh-button-hover-border-color | 悬停状态边框颜色 | var(--yh-color-primary-light-8) |
--yh-button-active-bg-color | 激活/点击状态背景颜色 | var(--yh-color-primary-light-8) |
--yh-button-active-border-color | 激活/点击状态边框颜色 | var(--yh-color-primary) |
--yh-button-active-text-color | 激活/点击状态文字颜色 | — |