# Button 按钮
# 使用指南
import Button from '@hips/uni-ui/lib/button';
export default {
components: {
'hips-button': Button,
},
};
1
2
3
4
5
6
7
2
3
4
5
6
7
# 跨平台支持
| 微信小程序 | 支付宝小程序 | 钉钉小程序 | 百度小程序 | 头条小程序 | QQ 小程序 |
|---|---|---|---|---|---|
| ✔️ | - | - | - | - | - |
# 代码演示
# 基础用法
<hips-button> 按钮 </hips-button>
1
# 设定类型
<hips-button> 默认按钮 </hips-button>
<hips-button type="primary">
主要按钮
</hips-button>
<hips-button type="second">
次要按钮
</hips-button>
<hips-button type="success">
成功按钮
</hips-button>
<hips-button type="danger">
危险按钮
</hips-button>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 设定尺寸
<hips-button size="large"> 大号按钮 </hips-button>
<hips-button> 默认按钮 </hips-button>
<hips-button size="small"> 小号按钮 </hips-button>
1
2
3
2
3
# 禁用
<hips-button disabled>禁用状态</hips-button>
1
# 显示左侧 loading
<hips-button loading>按钮</hips-button>
1
# 使用 ICON 或者图标
<hips-button type="primary" icon="phone"> 主要按钮 </hips-button>
<hips-button>
<img slot="icon" :src="img" alt="haima" class="image-icon" />
默认按钮
</hips-button>
1
2
3
4
5
2
3
4
5
# 宽度根据父容器自适应
<hips-button block> 主要按钮 </hips-button>
1
# 设定 open-type
<hips-button open-type="feedback">feedback</hips-button>
<hips-button open-type="share">share</hips-button>
<hips-button open-type="getUserInfo" @get-user-info="handleGetUserInfo"
>getUserInfo</hips-button
>
<hips-button open-type="contact" @contact="handleContact">contact</hips-button>
<hips-button open-type="getPhoneNumber" @get-phone-number="handleGetPhoneNumber"
>getPhoneNumber</hips-button
>
<hips-button open-type="launchApp" :app-parameter="appParameter"
>launchApp</hips-button
>
<hips-button open-type="openSetting" @open-setting="handleOpenSetting"
>openSetting</hips-button
>
<hips-button open-type="getAuthorize">getAuthorize</hips-button>
<hips-button open-type="contactShare">contactShare</hips-button>
<hips-button open-type="lifestyle">lifestyle</hips-button>
<hips-button open-type="openGroupProfile" :group-id="groupId"
>feedback</hips-button
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default {
data() {
return {
appParameter: 'test',
groupId: '',
};
},
methods: {
handleGetUserInfo(e) {},
handleContact(e) {},
handleGetPhoneNumber(e) {},
handleOpenSetting(e) {},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# Button API
# APIs
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 按钮类型，可选值为 primary second warning danger custom | String | primary |
| size | 按钮尺寸，可选值为 large small 或不设置 | String | - |
| disabled | 是否禁用 | Boolean | false |
| loading | 是否显示为加载中状态 | Boolean | false |
| block | 是否将按钮宽度调整为其父容器宽度 | Boolean | false |
| plain | 按钮是否镂空状态 | Boolean | false |
| color | type=custom 时设定文字颜色 | String | - |
| bg-color | type=custom 时设定背景颜色 | String | white |
| border | 是否显示边框 | Boolean | true |
| squire | 是否显示圆角 | Boolean | false |
| icon | 按钮内部显示的图标 | String | - |
| open-type | 开放能力 | String | - |
| form-type | 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 | String | - |
| app-parameter | 当 open-type="launchApp" 额外传递的参数 | Any | - |
| group-id | 当 open-type="openGroupProfile" 配置的群资料卡的群号 | Any | - |
# form-type 可选值
| 值 | 说明 |
|---|---|
| submit | 提交表单 |
| reset | 重置表单 |
# open-type 可选值
| 值 | 说明 | 平台差异 |
|---|---|---|
| feedback | 打开“意见反馈”页面，用户可提交反馈内容并上传日志 | 微信小程序、QQ 小程序 |
| share | 触发用户转发 | 小程序 |
| getUserInfo | 获取用户信息，可以监听 get-user-info 事件获取到用户信息，包括手机号、头像、昵称等信息 | 微信小程序、百度小程序、QQ 小程序 |
| contact | 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以监听 contact 事件获得具体信息 | 微信小程序、百度小程序 |
| getPhoneNumber | 获取用户手机号，可以监听 get-phone-number 事件获取到用户手机号 | 微信小程序、百度小程序、头条小程序 |
| launchApp | 打开 APP，可以通过 app-parameter 属性设定向 APP 传的参数 | 微信小程序、QQ 小程序 |
| openSetting | 打开授权设置页 | 微信小程序、百度小程序 |
| getAuthorize | 支持小程序授权 | 支付宝小程序 |
| contactShare | 分享到通讯录好友 | 支付宝小程序 |
| lifestyle | 关注生活号 | 支付宝小程序 |
| openGroupProfile | 呼起 QQ 群资料卡页面，可以通过 group-id 属性设定需要打开的群资料卡的群号，同时 manifest 中必须配置 groupIdList | QQ 小程序(基础库 1.4.7 版本+) |
注意
- 点击 share 分享按钮时会触发 onShareAppMessage
- 支付宝小程序平台，获取用户手机号时，建议先通过条件编译的方式，调用支付宝原生 API
- 在小程序中，开发者可以登录 微信小程序管理后台 、QQ 小程序后台后，进入菜单“客服反馈”页面获取反馈内容。
# Button Event
| 事件名 | 说明 | 参数 |
|---|---|---|
| click | 点击事件 | - |
| get-phone-number | open-type="getPhoneNumber"，点击获取的用户手机号 | 返回信息 |
| get-user-info | open-type="getUserInfo"，点击获取的用户信息 | 返回信息 |
| open-type-error | 设定 open-type 后，如果发生错误，触发的事件 | 返回信息 |
| open-setting | open-type="openSetting"，点击打开然后关闭时触发的事件 | 返回信息 |
| launch-app | open-type="launchApp"，点击打开 APP 成功后触发的事件 | 返回信息 |
| contact | open-type="contact"，点击打开客服会话，如果用户在会话中点击消息卡片后返回应用时触发的事件 | 返回信息 |
# 样式变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
| button-primary-bg-color | type=primary 时背景颜色 | #1F8CEB |
| button-primary-color | type=primary 时文字颜色 | white |
| button-primary-active-bg-color | type=primary 时点击状态下背景颜色 | #1d77c5 |
| button-primary-active-color | type=primary 时点击状态下文字颜色 | white |
| button-primary-disabled-bg-color | type=primary 时禁用状态下背景颜色 | #9FCBF1 |
| button-primary-disabled-color | type=primary 时禁用状态下文字颜色 | white |
| button-primary-plain-bg-color | type=primary plain=true 时背景颜色 | white |
| button-primary-plain-color | type=primary plain=true 时文字颜色 | #1F8CEB |
| button-primary-plain-active-color | type=primary plain=true 时点击状态下文字颜色 | #1d77c5 |
| button-primary-plain-disabled-color | type=primary plain=true 时禁用状态下文字颜色 | #9FCBF1 |
| button-second-bg-color | type=second 时背景颜色 | white |
| button-second-color | type=second 时文字颜色 | #4d4d44 |
| button-second-active-bg-color | type=second 时点击状态下背景颜色 | #EEEEEE |
| button-second-active-color | type=second 时点击状态下文字颜色 | #4d4d44 |
| button-second-disabled-bg-color | type=second 时禁用状态下背景颜色 | #EEEEEE |
| button-second-disabled-color | type=second 时禁用状态下文字颜色 | #9B9B9B |
| button-danger-bg-color | type=danger 时背景颜色 | #F96F68 |
| button-danger-color | type=danger 时文字颜色 | white |
| button-danger-active-bg-color | type=danger 时点击状态下背景颜色 | #E9615A |
| button-danger-active-color | type=danger 时点击状态下文字颜色 | white |
| button-danger-disabled-bg-color | type=danger 时禁用状态下背景颜色 | #FCB7B3 |
| button-danger-disabled-color | type=danger 时禁用状态下文字颜色 | white |
| button-danger-plain-bg-color | type=danger plain=true 时背景颜色 | white |
| button-danger-plain-color | type=danger plain=true 时文字颜色 | #F96F68 |
| button-danger-plain-active-color | type=danger plain=true 时点击状态下文字颜色 | #E9615A |
| button-danger-plain-disabled-color | type=danger plain=true 时禁用状态下文字颜色 | #FCB7B3 |
| button-success-bg-color | type=success 时背景颜色 | #48D2A0 |
| button-success-color | type=success 时文字颜色 | white |
| button-success-active-bg-color | type=success 时点击状态下背景颜色 | #3FC091 |
| button-success-active-color | type=success 时点击状态下文字颜色 | white |
| button-success-disabled-bg-color | type=success 时禁用状态下背景颜色 | #A3E8CF |
| button-success-disabled-color | type=success 时禁用状态下文字颜色 | white |
| button-success-plain-bg-color | type=success plain=true 时背景颜色 | white |
| button-success-plain-color | type=success plain=true 时文字颜色 | #48D2A0 |
| button-success-plain-active-color | type=success plain=true 时点击状态下文字颜色 | #3FC091 |
| button-success-plain-disabled-color | type=success plain=true 时禁用状态下文字颜色 | #A3E8CF |
| button-default-size-height | 按钮默认尺寸高度 | 88rpx |
| button-default-size-line-height | 按钮默认尺寸行高 | 84rpx |
| button-default-size-font-size | 按钮默认尺寸文字大小 | 32rpx |
| button-large-size-height | 按钮大尺寸高度 | 98rpx |
| button-large-size-line-height | 按钮大尺寸行高 | 94rpx |
| button-large-size-font-size | 按钮大尺寸文字大小 | 36rpx |
| button-small-size-height | 按钮小尺寸高度 | 68rpx |
| button-small-size-line-height | 按钮小尺寸行高 | 64rpx |
| button-small-size-font-size | 按钮小尺寸文字大小 | 24rpx |
注意
样式变量默认前缀为 $
可以通过 @hips/ui-stylus-loader 进行修改变量