Appearance
Button 组件测试
Button 组件提供多种样式变体、尺寸和状态选项。
基础用法
最简单的按钮使用:
变体 (Variants)
提供 6 种颜色变体:
Primary
Secondary
Success
Warning
Danger
Ghost
尺寸 (Sizes)
提供 3 种尺寸选项:
Small
Medium (默认)
Large
状态 (States)
禁用状态
块级按钮 (Block)
圆角按钮 (Rounded)
组合使用
可以组合使用不同的属性:
小尺寸 + 圆角
大尺寸 + 块级
圆角 + 幽灵
事件处理
点击事件:
实际应用示例
表单按钮组
操作按钮组
插槽内容
按钮内容支持任意内容:
API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'ghost' | 'primary' | 按钮样式变体 |
| size | 'sm' | 'md' | 'lg' | 'md' | 按钮尺寸 |
| disabled | boolean | false | 是否禁用 |
| block | boolean | false | 是否占满宽度 |
| rounded | boolean | false | 是否圆角 |
Events
| 事件 | 参数 | 说明 |
|---|---|---|
| click | MouseEvent | 点击事件(禁用时不触发) |
Slots
| 名称 | 说明 |
|---|---|
| default | 按钮内容 |
