npm package: @retailwe/ui-button
Description: ## 引入
Latest version: 0.0.18

# button 按钮

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "wr-button": "@retailwe/ui-button/index"
}
```

## 代码演示

### 基本用法

#### 按钮类型

```html
<wr-button>默认按钮</wr-button>
<wr-button type="primary">主要按钮</wr-button>
<wr-button type="disabled">禁用按钮</wr-button>
```

#### 按钮尺寸

```html
<wr-button type="primary" size="small">小型按钮</wr-button>
<wr-button type="primary">普通按钮</wr-button>
<wr-button type="primary" size="large">大号按钮</wr-button>
```

#### 按钮边框

```html
<wr-button>普通按钮</wr-button>
<wr-button hairline>细边框按钮</wr-button>
<wr-button no-border>无边框按钮</wr-button>
```

#### 加载状态

```html
<wr-button loading type="primary">加载状态</wr-button>
<wr-button loading>加载状态</wr-button>
```

#### 图标按钮

```html
<wr-button type="primary">
  <wr-icon name="home"></wr-icon>
</wr-button>
<wr-button no-border>
  <image mode="widthFix"
    src="https://cdn-we-retail.ym.tencent.com/miniapp/home/home-default-logo.png"
    style="width: 100rpx; padding: 15rpx 0;">
  </image>
</wr-button>
```

#### 块级元素(占满整行)

```html
<view>
  <wr-button type="primary">普通按钮</wr-button>
</view>
<view style="margin-top: 20rpx">
  <wr-button type="primary" block>块级元素</wr-button>
</view>
```

#### 自定义样式

```html
<wr-button btn-style="background-color: white; color: #7232dd;">单色按钮</wr-button>
<wr-button btn-style="background-color: #7232dd; color: white;">单色按钮</wr-button>
<wr-button btn-style="background: linear-gradient(to right, #4bb0ff, #6149f6); color: white;">渐变色按钮</wr-button>
```

#### 使用小程序开放能力

```html
<wr-button size="small" open-type="getUserInfo" bindgetuserinfo="handdleGetUserInfo">获取用户信息</wr-button>
<wr-button size="small" open-type="getPhoneNumber" bindgetphonenumber="handdleGetPhoneNumber">获取手机号</wr-button>
<wr-button size="small" open-type="share">分享</wr-button>
```

```ts
Page({
  data: {},
  handdleGetUserInfo(e: any) {
    console.log('e', e);
    console.log(e.detail.errMsg);
    console.log(e.detail.iv);
    console.log(e.detail.encryptedData);
  },
  handdleGetPhoneNumber(e: any) {
    console.log('e', e);
    console.log(e.detail.errMsg);
    console.log(e.detail.iv);
    console.log(e.detail.encryptedData);
  },
  onShareAppMessage(e: any) {
    console.log('e', e);
    return {
      title: 'button',
      path: 'components-exp/button/index',
    };
  },
});
```

### button Props

| 参数      | 说明             | 类型      | 默认值     | 版本 |
| --------- | ---------------- | --------- | ---------- | ---- |
| type   | 按钮样式类型   | _string_  | `normal`     | -    |
| size      | 按钮尺寸类型         | _string_ | `middle` | -    |
| hairline | 是否显示窄边框，通过缩放实现      | _boolean_   | `false` |
| noBorder | 不显示边框      | _boolean_   | `false` |
| block    | 按钮是否自动占满整行      | _boolean_   | `false` |
| text | 按钮文字，`text`为空时可使用slot | _string_ | - |
| btnStyle | 透传给按钮的样式 | _string_ | - |
| loading | 透传给原生`button`的属性 | _boolean_ | - |
| disabled | 透传给原生`button`的属性 | _boolean_ | - |
| openType | 透传给原生`button`的属性 | _string_ | - |
| businessId | 透传给原生`button`的属性 | _number_ | - |
| sessionFrom | 透传给原生`button`的属性 | _string_ | - |
| sendMessageTitle | 透传给原生`button`的属性 | _string_ | - |
| sendMessagePath | 透传给原生`button`的属性 | _string_ | - |
| sendMessageImg | 透传给原生`button`的属性 | _string_ | - |
| showMessageCard | 透传给原生`button`的属性 | _boolean_ | - |
| appParameter | 透传给原生`button`的属性 | _string_ | - |

### button Event

| 事件名     | 说明 | 参数 |
| ---------- | ---- | ---- |
| click | 点击按钮触发 | - |
| click-disabled | 已禁用按钮被点击时触发 | - |
| getuserinfo | 透传来自原生`button`的事件 |
| contact | 透传来自原生`button`的事件 |
| getphonenumber | 透传来自原生`button`的事件 |
| error | 透传来自原生`button`的事件 |
| launchapp | 透传来自原生`button`的事件 |
| opensetting | 透传来自原生`button`的事件 |

### Slots

| 名称 | 说明     |
| ---- | -------- |
| -    | 按钮文字或图片等 |

### empty 外部样式类

| 类名     | 说明         |
| -------- | ------------ |
| wr-class | 根节点样式类 |