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按钮内容

风起江湖 · 资料站