@retailwe/ui-button

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