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>