button组件
属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| size | string | default | 按钮的大小 | |
| type | string | default | 按钮的样式类型 | |
| plain | boolean | false | 按钮是否镂空,背景色透明 | |
| disabled | boolean | false | 是否禁用 | |
| loading | boolean | false | 名称前是否带 loading 图标 | |
| form-type | string | 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 | ||
| open-type | string | 小红书开放能力 | ||
| contact-type | string | 客服类型,默认值 seller | ||
| contact-id | string | contact-type 对应的key。contact-type 为 seller 时非必传;goods 时第三方商品 id;order时第三方订单 id。open-type=contact时有效 | ||
| hover-class | string | button-hover | 指定按钮按下去的样式类。当 hover-class='none' 时,没有点击态效果 | |
| hover-stop-propagation | boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | |
| hover-start-time | number,string | 20 | 按住后多久出现点击态,单位毫秒 | |
| hover-stay-time | number,string | 70 | 手指松开后点击态保留时间,单位毫秒 | |
| bindgetuserinfo | eventhandle | 用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与xhs.getUserInfo返回的一致,open-type='getUserInfo'时有效 | ||
| bindgetphonenumber | eventhandle | 获取用户手机号回调,open-type=getPhoneNumber时有效 | ||
| bindopensetting | eventhandle | 在打开授权设置页后回调,open-type=openSetting时有效 |
值 | 说明 |
|---|---|
| default | 默认大小 |
| mini | 小尺寸 |
值 | 说明 |
|---|---|
| primary | 绿色 |
| default | 白色 |
| warn | 红色 |
值 | 说明 |
|---|---|
| submit | 提交表单 |
| reset | 重置表单 |
值 | 说明 |
|---|---|
| seller | 等于 seller 时,contact-id 非必传 |
| goods | 等于 goods 时,contact-id 是第三方商品 id |
| order | 等于 order 时,contact-id 是第三方订单 id |

<view class="page-body">
<view class="btn-area" id="buttonContainer">
<button type="primary">页面主操作 Normal</button>
<button type="primary" loading="true">页面主操作 Loading</button>
<button type="primary" disabled="true">页面主操作 Disabled</button>
<button type="default">页面次要操作 Normal</button>
<button type="default" disabled="true">页面次要操作 Disabled</button>
<button type="warn">警告类操作 Normal</button>
<button type="warn" disabled="true">警告类操作 Disabled</button>
<view class="button-sp-area">
<button type="primary" plain="true">按钮</button>
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
<button type="default" plain="true">按钮</button>
<button type="default" disabled="true" plain="true">按钮</button>
<button class="mini-btn" type="primary" size="mini">按钮</button>
<button class="mini-btn" type="default" size="mini">按钮</button>
<button class="mini-btn" type="warn" size="mini">按钮</button>
</view>
<button type="primary" open-type="contact" bindcontact="handleContact" show-message-card="{{true}}" send-message-title="临时会话">打开客服会话</button>
<button type="primary" open-type="share">触发用户转发</button>
<button type="primary" open-type="getPhoneNumber" bindgetphonenumber="handleGetPhoneNumber">获取用户手机号</button>
<button type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="handleGetUserInfo">获取用户信息</button>
<button type="primary" open-type="openSetting" bindopensetting="handleOpenSetting">打开设置授权页</button>
<button type="primary" open-type="feedback">打开意见反馈</button>
</view>
</view>