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 外部样式类