按钮Button
该组件封装 Element Plus 的按钮,支持多种样式类型、尺寸及状态控制,并内置二次确认逻辑,适用于各类交互场景。
基础属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | string | -- | 按钮尺寸(可选值由平台通用尺寸选项决定) |
type | string | -- | 按钮类型(可选值由平台通用类型选项决定) |
plain | boolean | -- | 是否为朴素按钮 |
text | boolean | -- | 是否为文字按钮 |
link | boolean | -- | 是否为链接按钮 |
round | boolean | -- | 是否为圆角按钮 |
circle | boolean | -- | 是否为圆形按钮 |
loading | boolean | -- | 是否加载中状态 |
disabled | boolean | -- | 是否禁用状态 |
fullSize | boolean | -- | 是否尺寸自适应 |
高级属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | 按钮 | 按钮文字 (可绑定) |
showConfirm | boolean | -- | 是否二次确认(可绑定) |
confirmMsg | string | -- | 二次确认提示(仅当启用二次确认时显示)(可绑定) |
组件事件
| 事件名 | 说明 |
|---|---|
click | 按钮点击时触发(若启用二次确认,将在用户确认后执行) |
注意事项
- 当
showConfirm为true时,点击按钮会弹出确认对话框,默认提示为“是否确认执行”,可通过confirmMsg自定义; fullSize属性启用时,按钮将自动撑满容器(width: 100%; height: 100%),适用于布局自适应场景;
