# button (w-button)

- **Import**: `WButton` from `win-design-next`
- **Tag**: `<w-button>`
- **说明**: Button 按钮
- **分类**: general
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/button.md`

## API

## Button API

### Attributes

| 参数                | 说明                                                        | 类型                                                                           | 默认值  | Version |
| ------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------ | ------- | ------- |
| size                | 尺寸                                                        | ^[enum]`'large' \| 'default' \| 'small' \| 'mini'`                             | —       |
| type                | 按钮类型，在设置`color`时，后者优先。                       | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'error' \| 'info' ` | —       |
| 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   |
| tag                 | 自定义元素标签                                              | ^[string] / ^[Component]                                                       | button  |
| tight               | 是否为紧凑按钮                                              | ^[boolean]                                                                     | true    |
| debounce            | 是否开启防抖                                                | ^[boolean]                                                                     | false   | V0.0.7  |
| debounce-time       | 防抖时间                                                    | ^[number]                                                                      | 200     | V0.0.7  |
| loading-ball        | 是否显示加载中小球弹跳                                      | ^[boolean]                                                                     | false   | V1.0.0  |
| winmonitor ^(1.0.2) | 是否开启按钮点击上报日志                                    | ^[boolean]                                                                     | true    | V1.0.2  |

### Slots

| 插槽名  | 说明             |
| ------- | ---------------- |
| default | 自定义默认内容   |
| loading | 自定义加载中组件 |
| icon    | 自定义图标组件   |

### Exposes

| 属性名         | 说明                       | 类型                   |
| -------------- | -------------------------- | ---------------------- |
| ref            | 按钮 html 元素             | ^[object]`Ref`         |
| size           | 按钮尺寸                   | ^[object]`ComputedRef` |
| type           | 按钮类型                   | ^[object]`ComputedRef` |
| disabled       | 按钮已禁用                 | ^[object]`ComputedRef` |
| shouldAddSpace | 是否在两个字符之间插入空格 | ^[object]`ComputedRef` |
