button.md 7.2 KB
title: Button 按钮
lang: zh-CN
基础用法
:::demo 使用 type、plain、round 和 circle 来定义按钮的样式。
button/basic
:::
禁用状态
你可以使用 disabled 属性来定义按钮是否被禁用。
:::demo 使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean 类型的值。
button/disabled
:::
链接按钮
:::demo
button/link
:::
文字按钮
没有边框和背景色的按钮。
:::demo
button/text
:::
图标按钮
使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。
:::demo 使用 icon 属性来为按钮添加图标。 您可以在我们的 Icon 组件中找到所需图标。 通过向右方添加标签来添加图标， 你也可以使用自定义图标。
button/icon
:::
按钮组
以按钮组的方式出现，常用于多项类似操作。
:::demo 使用 对多个按钮分组。
button/group
:::
加载状态按钮
点击按钮来加载数据，并向用户反馈加载状态。
通过设置 loading 属性为 true 来显示加载中状态。
:::tip
您可以使用 loading 插槽或 loadingIcon 属性自定义您的 loading 图标
ps: loading 插槽优先级高于loadingIcon 属性
:::
:::demo
button/loading
:::
调整尺寸
除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。
:::demo 使用 size 属性额外配置尺寸，可使用 large和small两种值。
button/size
:::
自定义颜色
您可以自定义按钮颜色。
我们将自动计算 hover 和 active 颜色。
:::demo
button/custom
:::
Button API
Button 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size | 尺寸 | ^[enum]'large'\| 'default'\| 'small' |
— |
| type | 类型 | ^[enum]'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'\| 'text'(delete) |
— |
| plain | 是否为朴素按钮 | ^[boolean] | false |
| text< | 是否为文字按钮 | ^[boolean] | false |
| bg | 是否显示文字按钮背景颜色 | ^[boolean] | false |
| link | 是否为链接按钮 | ^[boolean] | false |
| round | 是否为圆角按钮 | ^[boolean] | false |
| circle | 是否为圆形按钮 | ^[boolean] | false |
| loading | 是否为加载中状态 | ^[boolean] | false |
| loading-icon | 自定义加载中状态图标组件 | ^[string] / ^[Component] | Loading |
| disabled | 按钮是否为禁用状态 | ^[boolean] | false |
| icon | 图标组件 | ^[string] / ^[Component] | — |
| autofocus | 原生 autofocus 属性 |
^[boolean] | false |
| native-type | 原生 type 属性 |
^[enum]'button'\| 'submit'\| 'reset' |
button |
| auto-insert-space | 自动在两个中文字符之间插入空格 | ^[boolean] | — |
| color | 自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色 |
^[string] | — |
| dark | dark 模式, 意味着自动设置 color 为 dark 模式的颜色 | ^[boolean] | false |
Button 插槽
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
| loading | 自定义加载中组件 |
| icon | 自定义图标组件 |
Button 对外暴露的方法
| 属性名 | 说明 | 类型 |
|---|---|---|
| ref | 按钮 html 元素 | ^[object]Ref<HTMLButtonElement> |
| size | 按钮尺寸 | ^[object]ComputedRef<'' \| 'small' \| 'default' \| 'large'> |
| type | 按钮类型 | ^[object]ComputedRef<'' \| 'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'text'> |
| disabled | 按钮已禁用 | ^[object]ComputedRef<boolean> |
| shouldAddSpace | 是否在两个字符之间插入空格 | ^[object]ComputedRef<boolean> |
ButtonGroup API
Button Group 属性
| 插槽名 | 说明 | 默认值 | x 默认值 |
|---|---|---|---|
| size | 用于控制该按钮组内按钮的大小 | ^[enum]'large'\| 'default'\| 'small' |
— |
| type | 用于控制该按钮组内按钮的类型 | ^[enum]'primary'\| 'success'\| 'warning'\| 'danger'\| 'info' |
— |
ButtonGroup 插槽
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| default | 自定义按钮组内容 | Button |