Skip to content

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'按钮尺寸
disabledbooleanfalse是否禁用
blockbooleanfalse是否占满宽度
roundedbooleanfalse是否圆角

Events

事件参数说明
clickMouseEvent点击事件(禁用时不触发)

Slots

名称说明
default按钮内容

风起江湖 · 资料站