button 按钮

引入

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

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

代码演示

基本用法

按钮类型

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

按钮尺寸

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

按钮边框

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

加载状态

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

图标按钮

<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>

块级元素(占满整行)

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

自定义样式

<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>

使用小程序开放能力

<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>

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