# Button 按钮
基础按钮组件，用于触发一个操作，如提交表单，弹窗选择等。
提示
部分api与 uniapp button (opens new window) 对齐
# 平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
# 示例
# 基础用法
文字内容通过 slot 传入
<pi-button type="primary">基础用法</pi-button>
1
# 按钮类型
使用 default (默认)、primary、secondary、warn、line 设置按钮类型。
<pi-button type="primary">主要按钮</pi-button>
<pi-button type="secondary">次要按钮</pi-button>
<pi-button type="warn">警告按钮</pi-button>
<pi-button type="line">线框按钮</pi-button>
1
2
3
4
2
3
4
# 按钮尺寸
使用 default (默认)、large、medium、small、tiny、mini 设置按钮尺寸。
<pi-button size="large">大按钮</pi-button>
<pi-button size="default">普通按钮</pi-button>
<pi-button size="medium">中按钮</pi-button>
<pi-button size="small">小按钮</pi-button>
<pi-button size="tiny">超小按钮</pi-button>
<pi-button size="mini">迷你按钮</pi-button>
1
2
3
4
5
6
2
3
4
5
6
# 圆角按钮
添加 round 属性设置为圆角按钮。
<pi-button type="secondary" size="large" round>大按钮</pi-button>
<pi-button type="secondary" size="default" round>普通按钮</pi-button>
<pi-button type="secondary" size="medium" round>中按钮</pi-button>
<pi-button type="secondary" size="small" round>小按钮</pi-button>
<pi-button type="secondary" size="tiny" round>超小按钮</pi-button>
<pi-button type="secondary" size="mini" round>迷你按钮</pi-button>
1
2
3
4
5
6
2
3
4
5
6
# 禁用按钮
添加 disabled 属性设置为禁用按钮。
<pi-button type="primary" size="large" disabled>大按钮</pi-button>
<pi-button type="secondary" size="default" disabled>普通按钮</pi-button>
<pi-button type="warn" size="medium" disabled>中按钮</pi-button>
<pi-button type="line" size="small" disabled>小按钮</pi-button>
<pi-button type="primary" size="tiny" disabled>超小按钮</pi-button>
<pi-button type="primary" size="mini" disabled>迷你按钮</pi-button>
1
2
3
4
5
6
2
3
4
5
6
# 渐变按钮（自定义样式）
通过 custom-style 给按钮添加样式。
<pi-button
type="primary"
size="default"
:custom-style="{
background: 'linear-gradient(90deg, #6F8EFF 0%, #4731FF 100%)',
boxShadow: '0px 8px 8px 0px rgba(66, 106, 255, 0.16);'
}"
>
普通按钮
</pi-button>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 按钮宽度
通过设置 width 来控制按钮的宽度。
<pi-button type="line" width="100%" custom-class="pi-mg-bottom-8">
100%
</pi-button>
<pi-button type="primary" width="50%" custom-class="pi-mg-bottom-8">
50%
</pi-button>
<pi-button type="secondary" width="225">225px</pi-button>
<pi-button type="secondary" width="300">300px</pi-button>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 加载中
添加 loading 属性设置为加载按钮。
<pi-button loading type="primary" size="default">
loading
</pi-button>
1
2
3
2
3
# 自定义样式
<pi-button size="large" width="100%" color="#ffffff" bg-color="#ff508a" custom-class="pi-mg-top-12">
<view class="pi-flex-column-center pi-h-100P">
<view class="pi-lh-1 pi-mg-bottom-12">主按钮</view>
<view class="pi-lh-1 pi-fz-24">副文本</view>
</view>
</pi-button>
<pi-button color="#ffffff" bg-color="#ff508a" custom-class="pi-mg-top-12" round>
<pi-icon name="check" />
<text class="pi-mg-left-12">带勾选按钮</text>
</pi-button>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 吸底按钮
配合 pi-bottom-bar 组件可实现吸底按钮。
<pi-bottom-bar>
<pi-button width="100%" type="primary" size="large">
吸底按钮
</pi-button>
</pi-bottom-bar>
1
2
3
4
5
2
3
4
5
# API
# Props
| 名称 | 描述 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| size | 按钮尺寸 | 'default' 'large' 'medium' 'small' 'tiny' 'mini' | false | 'default' |
| type | 按钮的预置样式 | 'default' 'primary' 'warn' 'secondary' 'line' | false | 'default' |
| plain | 按钮是否镂空 | Boolean | false | false |
| disabled | 是否禁止状态 | Boolean | false | false |
| loading | 是否加载中 | Boolean | false | false |
| formType | 取值为submit（提交表单），reset（重置表单） | String | false | '' |
| openType | 开放能力，具体请看uniapp稳定关于button组件部分说明 | String | false | '' |
| hoverClass | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 | String | false | 'button-hover' |
| hoverStartTime | 按住后多久出现点击态，单位毫秒 | Number | false | 20 |
| hoverStayTime | 手指松开后点击态保留时间，单位毫秒 | Number | false | 70 |
| appParameter | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | String | false | '' |
| hoverStopPropagation | 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 | Boolean | false | false |
| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效 | String | false | 'en' |
| sessionFrom | 会话来源，open-type="contact"时有效。只微信小程序有效 | String | false | '' |
| sendMessageTitle | 会话内消息卡片标题，open-type="contact"时有效 默认当前标题，只微信小程序有效 | String | false | '' |
| sendMessagePath | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 默认当前分享路径，只微信小程序有效 | String | false | '' |
| sendMessageImg | 会话内消息卡片图片，open-type="contact"时有效 默认当前页面截图，只微信小程序有效 | String | false | '' |
| showMessageCard | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示， 用户点击后可以快速发送小程序消息，open-type="contact"时有效 | Boolean | false | false |
| customStyle | 自定义样式，对象形式 | Object | false | {} |
| customClass | 自定义样式类，字符串形式 | String | false | {} |
| width | 按钮宽度，不设置默认自动撑开，如果需要占满一行，填写’100%‘ | String | Number | false | '' |
| color | 自定义颜色按钮（type为default，可自定义设置） | String | false | '' |
| bgColor | 自定义背景色按钮（type为default，可自定义设置） | String | false | '' |
| round | 按钮是否椭圆 | Boolean | false | false |
| ripple | 是否开启水波纹效果（默认值：true） | Boolean | false | true |
| rippleBgColor | 水波纹的背景颜色（默认值：''） | String | false | '' |
# Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| click | - | - |
| getphonenumber | 微信小程序中获取用户手机号回调，需设置open-type="getPhoneNumber" | - |
| getuserinfo | 微信小程序中用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo，需设置open-type="getUserInfo" | - |
| error | 微信小程序中当使用开放能力时，发生错误的回调 | - |
| opensetting | 微信小程序中在打开授权设置页并关闭后回调，需设置open-type="openSetting" | - |
| launchapp | 微信小程序中从小程序打开 App 成功的回调 | - |
# Slots
| 名称 | 描述 | 插槽内容 |
|---|---|---|
| default | 按钮内容 | - |