# @retailwe/ui-button

> ## 引入

Latest version **0.0.18** (published 2020-11-12) · 0 weekly downloads

## Install

```sh
npm install @retailwe/ui-button
pnpm add @retailwe/ui-button
yarn add @retailwe/ui-button
bun add @retailwe/ui-button
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.18 |
| Published | 2020-11-12 |
| First published | 2020-05-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rachelrgao, gaterking, jeannehuang, jerryc |

## Links

- npm: https://www.npmjs.com/package/@retailwe/ui-button
- Repository: git@git.code.tencent.com:tencent-retail-fe/retailwe
- npm.io page: https://npm.io/package/@retailwe/ui-button

## Recent versions

- 0.0.18 (latest) — 2020-11-12
- 0.0.7-beta.1 (beta) — 2020-05-02
- 0.0.17 — 2020-10-15
- 0.0.16 — 2020-09-24
- 0.0.15 — 2020-08-12
- 0.0.14 — 2020-07-13
- 0.0.13 — 2020-06-30
- 0.0.12 — 2020-06-23
- 0.0.11 — 2020-05-12
- 0.0.10 — 2020-05-09
- 0.0.9 — 2020-05-09
- 0.0.8 — 2020-05-08

## README

# 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 | 根节点样式类 |

---
_Source: https://npm.io/package/@retailwe/ui-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._