# Button 按钮

[toc]

用于传递用户触摸时会触发的操作。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-button": "../dist/button/index"
  }
}

```

## 用法

### 按钮类型

通过 `variant` 属性来设置按钮类型，支持 `default`、`primary`、`secondary`、`success`、`warning`、`danger` 六种类型，默认为 `default`。

```html
<tea-button variant="default">预设按钮</tea-button>
<tea-button variant="primary">主要按钮</tea-button>
<tea-button variant="secondary">次要按钮</tea-button>
<tea-button variant="success">成功按钮</tea-button>
<tea-button variant="warning">警告按钮</tea-button>
<tea-button variant="danger">危险按钮</tea-button>
```

### 按钮颜色填充方式

通过 `fill` 属性来指定按钮颜色填充方式，支持 `solid`、`outline` 两种方式。若选择 `outline` 方式，此时背景色为白色、文字与边框为按钮颜色，默认为 `solid`。

```html
<tea-button variant="primary" fill="solid">预设按钮</tea-button>
<tea-button variant="primary" fill="outline">主要按钮</tea-button>
```

### 按钮尺寸

通过 `size` 属性来指定按钮尺寸，支持 `sm`、`md`、`lg` 三种尺寸，默认为 `lg`。

```html
<tea-button variant="primary" size="sm">小号按钮</tea-button>
<tea-button variant="primary" size="md">中号按钮</tea-button>
<tea-button variant="primary" size="lg">大号按钮</tea-button>
```

### 展示禁用状态

通过 `disabled` 属性来展示禁用状态，此时按钮不可点击。

```html
<tea-button variant="default" disabled>禁用状态</tea-button>
<tea-button variant="primary" disabled>禁用状态</tea-button>
```

### 展示加载状态

通过 `loading` 属性来展示加载状态，默认为加载图标。可搭配 `loadingText`、`loadingType`、`loadingSize` 三个属性分别设置加载文字、加载图标类型、加载图标大小，此时按钮不可点击。

```html
<tea-button variant="default" loading></tea-button>
<tea-button variant="default" loading loadingText="Loading…"></tea-button>
<tea-button variant="default" loading loadingType="circular"></tea-button>
<tea-button variant="default" loading loadingSize="24"></tea-button>
```

## Props

| 参数               | 描述                                                                                            | 类型              | 默认值                 | 可选值                                                                                             |
| ---------------- | --------------------------------------------------------------------------------------------- | --------------- | ------------------- | ----------------------------------------------------------------------------------------------- |
| size             | 按钮的大小                                                                                         | `String`        | `lg`                | `["sm", "md", "lg"]`                                                                            |
| variant          | 按钮的样式类型                                                                                       | `String`        | `default`           | `["default", "primary", "secondary", "success", "warning", "danger"]`                           |
| fill             | 按钮颜色填充方式                                                                                      | `String`        | `solid`             | `["outline", "solid"]`                                                                          |
| minWidth         | 按钮最小宽度，size='lg' 时属性不生效。预设单位为px，支持自带单位。                                                       | `Number,String` | -                   | -                                                                                               |
| disabled         | 是否禁用                                                                                          | `Boolean`       | `false`             | -                                                                                               |
| loading          | 是否为loading状态                                                                                  | `Boolean`       | `false`             | -                                                                                               |
| loadingType      | 加载图标类型                                                                                        | `String`        | `spinner`           | `["circular", "spinner"]`                                                                       |
| loadingSize      | 加载图标大小，默认单位为px                                                                                | `Number`        | `20`                | -                                                                                               |
| loadingText      | 加载文案                                                                                          | `String`        | -                   | -                                                                                               |
| hoverClass       | 指定按钮按下去的样式类。当 hover-class='none' 时，没有点击态效果                                                    | `String`        | `tea-button--hover` | -                                                                                               |
| formType         | 用于小程序官方form组件，点击分别会触发该组件的submit/reset事件                                                       | `String`        | -                   | `["submit", "reset"]`                                                                           |
| openType         | 微信开放能力                                                                                        | `String`        | -                   | `["contact", "share", "getPhoneNumber", "getUserInfo", "launchApp", "openSetting", "feedback"]` |
| lang             | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文                                                       | `String`        | `en`                | `["en", "zh_CN", "zh_TW"]`                                                                      |
| appParameter     | 打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效                                                  | `String`        | -                   | -                                                                                               |
| sessionFrom      | 会话来源，open-type='contact' 时有效                                                                  | `String`        | -                   | -                                                                                               |
| sendMessageTitle | 会话内消息卡片标题，open-type='contact' 时有效                                                             | `String`        | `当前标题`              | -                                                                                               |
| sendMessagePath  | 会话内消息卡片点击跳转小程序路径，open-type='contact' 时有效                                                      | `String`        | `当前分享路径`            | -                                                                                               |
| sendMessageImg   | 会话内消息卡片图片，open-type='contact' 时有效                                                             | `String`        | `截图`                | -                                                                                               |
| showMessageCard  | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示'可能要发送的小程序'提示，用户点击后可以快速发送小程序消息，open-type='contact' 时有效 | `Boolean`       | `false`             | -                                                                                               |

## 事件

| 事件名                 | 描述                                                                                  |
| ------------------- | ----------------------------------------------------------------------------------- |
| bind:click          | 在点击按钮时触发，但按钮状态为禁用或加载状态时不会被触发                                                        |
| bind:getuserinfo    | 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，仅在`open-type="getUserInfo"`时有效 |
| bind:contact        | 客服消息回调，仅在`open-type="getUserInfo"`时有效                                               |
| bind:getphonenumber | 获取用户手机号回调，仅在`open-type="getPhoneNumber"`时有效                                         |
| bind:error          | 当使用开放能力时，发生错误的回调，仅在`open-type="launchApp"`时有效                                       |
| bind:opensetting    | 在打开授权设置页后回调，仅在`open-type="openSetting"`时有效                                          |
| bind:launchapp      | 打开 APP 成功的回调，仅在`open-type="launchApp"`时有效                                           |

## Slots

| 名称    | 描述           |
| ----- | ------------ |
| -     | 未具名slot，居中展示 |
| start | 左侧slot       |
| end   | 右侧slot       |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                                        | 默认值                                  | 描述                                                                      |
| ------------------------------------------ | ------------------------------------ | ----------------------------------------------------------------------- |
| button-sm-height                           | 32px                                 | -                                                                       |
| button-sm-text-size                        | @font-size-sm                        | -                                                                       |
| button-sm-padding-horizontal               | 10px                                 | -                                                                       |
| button-md-height                           | 44px                                 | -                                                                       |
| button-md-text-size                        | @font-size-md                        | -                                                                       |
| button-md-padding-horizontal               | @padding-sm                          | -                                                                       |
| button-lg-height                           | 48px                                 | -                                                                       |
| button-lg-text-size                        | @font-size-md                        | -                                                                       |
| button-lg-padding-horizontal               | @padding-md                          | -                                                                       |
| button-default-text-color                  | @text-base-color                     | -                                                                       |
| button-default-solid-text-color            | @text-base-color                     | -                                                                       |
| button-default-background-color            | @background-base-color               | -                                                                       |
| button-default-border-color                | @border-color                        | -                                                                       |
| button-default-hover-background-color      | @background-base-hover-color         | -                                                                       |
| button-default-hover-border-color          | @border-hover-color                  | -                                                                       |
| button-default-disabled-background-color   | @background-base-color               | -                                                                       |
| button-default-disabled-border-color       | @border-disabled-color               | -                                                                       |
| button-primary-text-color                  | @text-primary-color                  | -                                                                       |
| button-primary-solid-text-color            | @text-base-inverse-color             | -                                                                       |
| button-primary-background-color            | @background-primary-color            | -                                                                       |
| button-primary-border-color                | @border-primary-color                | -                                                                       |
| button-primary-hover-background-color      | @background-primary-hover-color      | -                                                                       |
| button-primary-hover-border-color          | @border-primary-hover-color          | -                                                                       |
| button-primary-disabled-background-color   | @background-primary-disabled-color   | -                                                                       |
| button-primary-disabled-border-color       | @border-primary-disabled-color       | -                                                                       |
| button-secondary-text-color                | @text-secondary-color                | -                                                                       |
| button-secondary-solid-text-color          | @text-base-inverse-color             | -                                                                       |
| button-secondary-background-color          | @background-secondary-color          | -                                                                       |
| button-secondary-border-color              | @border-secondary-color              | -                                                                       |
| button-secondary-hover-background-color    | @background-secondary-hover-color    | -                                                                       |
| button-secondary-hover-border-color        | @border-secondary-hover-color        | -                                                                       |
| button-secondary-disabled-background-color | @background-secondary-disabled-color | -                                                                       |
| button-secondary-disabled-border-color     | @border-secondary-disabled-color     | -                                                                       |
| button-success-text-color                  | @text-success-color                  | -                                                                       |
| button-success-solid-text-color            | @text-base-inverse-color             | -                                                                       |
| button-success-background-color            | @background-success-color            | -                                                                       |
| button-success-border-color                | @border-success-color                | -                                                                       |
| button-success-hover-background-color      | @background-success-hover-color      | -                                                                       |
| button-success-hover-border-color          | @border-success-hover-color          | -                                                                       |
| button-success-disabled-background-color   | @background-success-disabled-color   | -                                                                       |
| button-success-disabled-border-color       | @border-success-disabled-color       | -                                                                       |
| button-warning-text-color                  | @text-warning-color                  | -                                                                       |
| button-warning-solid-text-color            | @text-base-inverse-color             | -                                                                       |
| button-warning-background-color            | @background-warning-color            | -                                                                       |
| button-warning-border-color                | @border-warning-color                | -                                                                       |
| button-warning-hover-background-color      | @background-warning-hover-color      | -                                                                       |
| button-warning-hover-border-color          | @border-warning-hover-color          | -                                                                       |
| button-warning-disabled-background-color   | @background-warning-disabled-color   | -                                                                       |
| button-warning-disabled-border-color       | @border-warning-disabled-color       | -                                                                       |
| button-danger-text-color                   | @text-danger-color                   | -                                                                       |
| button-danger-solid-text-color             | @text-base-inverse-color             | -                                                                       |
| button-danger-background-color             | @background-danger-color             | -                                                                       |
| button-danger-border-color                 | @border-danger-color                 | -                                                                       |
| button-danger-hover-background-color       | @background-danger-hover-color       | -                                                                       |
| button-danger-hover-border-color           | @border-danger-hover-color           | -                                                                       |
| button-danger-disabled-background-color    | @background-danger-disabled-color    | -                                                                       |
| button-danger-disabled-border-color        | @border-danger-disabled-color        | -                                                                       |
| button-text-font-weight                    | @font-weight-normal                  | -                                                                       |
| button-border-radius                       | @border-radius-none                  | -                                                                       |
| button-outline-background-color            | @background-base-color               | @button-solid-text-color:                     @text-base-inverse-color; |
| button-loading-text-margin-left            | 5px                                  | -                                                                       |