# Button 按钮
概述
Button 按钮，支持自定义大小、颜色等。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiButton from "@/components/firstui/fui-button/fui-button.vue"
export default {
components:{
fuiButton
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 text 属性设置按钮显示文本或者直接使用slot。（注意：nvue端，直接使用slot时字体相关设置属性失效，须嵌套text标签设置字体样式。）
<fui-button text="默认按钮"></fui-button>
<fui-button>默认按钮</fui-button>
1
2
2
按钮类型
通过 type 属性设置按钮的类型，不传值则默认为 primary 。
<fui-button type="success">success</fui-button>
<fui-button type="warning">warning</fui-button>
1
2
2
注意：非nvue端，可通过css变量全局修改按钮type类型对应的颜色，css变量参考 自定义主题。
禁用状态
通过 disabled 属性设置按钮是否禁用，disabledBackground 属性设置禁用状态下背景色，disabledColor 属性设置禁用状态下字体颜色。
<fui-button disabled>禁用按钮</fui-button>
<fui-button disabled loading>禁用按钮</fui-button>
<fui-button disabled disabledBackground="#F8F8F8" disabledColor="#CCCCCC">禁用按钮
</fui-button>
1
2
3
4
2
3
4
按钮形状
通过 radius 属性设置按钮圆角大小，从而控制按钮形状。
<fui-button radius="0">方形按钮</fui-button>
<fui-button radius="96rpx">圆形按钮</fui-button>
1
2
2
自定义颜色
通过 background 属性设置按钮背景色，color 属性设置按钮文字颜色，borderColor 属性设置按钮边框颜色。
<fui-button background="#fff" color="#465CFF" borderColor="#465CFF">朴素按钮</fui-button>
1
TIP
若组件宽度为 100% 时，注意设置外层容器的宽度，避免 flex 布局下，宽度被挤压。若宽度被挤压可在组件外层套个view，将view宽度设置成100%（nvue需设置具体值或flex:1）。
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 标签内显示内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| type | String | 按钮类型，可取值：primary、success、 warning、danger、link、purple、gray | primary | - |
| background | String | 按钮背景色，当传入值时type失效 | - | - |
| text | String | 按钮显示文本 | - | nvue端推荐使用此属性设置文本，使用插槽则字体颜色等属性失效 |
| color | String | 按钮字体颜色 | #fff | - |
| disabledBackground | String | 按钮禁用状态下背景色 | - | - |
| disabledColor | String | 按钮禁用状态下字体颜色 | - | - |
| borderWidth | String | 按钮边框宽度，非Nvue端默认缩放0.5倍V1.6.0+ | Nvue : 0.5px 非Nvue : 1px | Nvue端细边框可直接使用0.5px |
| borderColor | String | 按钮边框颜色 | - | - |
| btnSize V1.9.8+ | String | 按钮大小，可选值：medium、small、mini，优先级高于width和height属性 | - | - |
| width | String | 按钮宽度 | 100% | - |
| height | String | 按钮高度 | 96rpx | - |
| size | Number,String | 字体大小，单位rpx | 32 | - |
| bold | Boolean | 字体是否加粗 | false | - |
| margin | Array | margin值：['20rpx','30rpx','20rpx','30rpx'] [上，右，下，左] | ['0', '0'] | - |
| radius | String | 圆角大小 | 16rpx | - |
| plain | Boolean | 是否镂空 | false | - |
| disabled | Boolean | 是否禁用 | false | - |
| loading | Boolean | 是否显示加载图标 | false | - |
| formType | String | 参考uniapp官方按钮formType (opens new window)属性 | - | - |
| openType | String | 参考uniapp官方按钮openType (opens new window)属性 | - | - |
| scope | String | 当 open-type 为 getAuthorize 时，可以设置 scope 为：phoneNumber、userInfo | - | 支付宝小程序 |
| appParameter V1.9.5+ | String | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | - | 微信小程序、QQ小程序 |
| hoverStopPropagation V2.3.0+ | Boolean | 指定是否阻止本节点的祖先节点出现点击态 | false | 仅微信小程序支持 |
| lang V2.3.0+ | String | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 | en | 仅微信小程序支持 |
| sessionFrom V2.3.0+ | String | 会话来源，open-type="contact"时有效 | - | 仅微信小程序支持 |
| sendMessageTitle V2.3.0+ | String | 会话内消息卡片标题，open-type="contact"时有效 | 当前标题 | 仅微信小程序支持 |
| sendMessagePath V2.3.0+ | String | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | 当前分享路径 | 仅微信小程序支持 |
| sendMessageImg V2.3.0+ | String | 会话内消息卡片图片，open-type="contact"时有效 | 截图 | 仅微信小程序支持 |
| showMessageCard V2.3.0+ | boolean | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | false | 仅微信小程序支持 |
| phoneNumberNoQuotaToast V2.3.0+ | boolean | 当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效 | true | 仅微信小程序支持 |
| groupId V2.3.0+ | String | 打开群资料卡时，传递的群号，open-type="openGroupProfile"时有效 | - | QQ小程序 |
| guildId V2.3.0+ | String | 打开频道页面时，传递的频道号，open-type="openGuildProfile"时有效 | - | QQ小程序 |
| publicId V2.3.0+ | String | 打开公众号资料卡时，传递的号码，open-type="openPublicProfile"时有效 | - | QQ小程序 |
| dataImId V2.3.0+ | String | 客服的抖音号，open-type="im"时有效 | - | 抖音小程序2.68.0版本+ |
| dataImType V2.3.0+ | String | IM卡片类型，open-type="im"时有效 | - | 抖音小程序2.80.0版本+ |
| dataGoodsId V2.3.0+ | String | 商品的id，仅支持泛知识课程库和生活服务商品库中的商品，open-type="im"时有效 | - | 抖音小程序2.80.0版本+ |
| dataOrderId V2.3.0+ | String | 订单的id，仅支持交易2.0订单，open-type="im"时有效 | - | 抖音小程序2.80.0版本+ |
| dataBizLine V2.3.0+ | String | 商品类型，“1”代表生活服务，“2”代表泛知识。open-type="im"时有效 | - | 抖音小程序2.80.0版本+ |
| index | Number, String | 自定义参数 | 0 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 按钮点击事件，设置formType时无需使用 | { index:自定义参数 } |
| @getuserinfo | 参考官方按钮 getuserinfo (opens new window) | 返回获取到的用户信息 |
| @contact | 打开客服会话，参考官方按钮open-type值 contact (opens new window) | 如果用户在会话中点击消息卡片后返回应用，可以从 contact 回调中获得具体信息 |
| @getphonenumber | 获取用户手机号回调，参考官方按钮getphonenumber (opens new window) | 手机号信息 |
| @error | 当使用开放能力时，发生错误的回调，参考官方按钮error (opens new window) | 错误回调信息 |
| @opensetting | 在打开授权设置页并关闭后回调，参考官方按钮opensetting (opens new window) | 授权设置信息 |
| @chooseavatar V2.0.0+ | 获取用户头像回调 | 头像信息，仅微信小程序支持 |
| @launchapp V2.0.0+ | 从小程序打开 App 成功的回调 | {detail = {} } |
| @agreeprivacyauthorization V2.3.0+ | 用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效，微信小程序2.33.0支持 | Handler |
| @addgroupapp V2.3.0+ | 添加群应用的回调，open-type="addGroupApp"时有效，QQ小程序 | Handler |
| @chooseaddress V2.3.0+ | 调起用户编辑并选择收货地址的回调，open-type="chooseAddress"时有效，百度小程序 | Handler |
| @chooseinvoicetitle V2.3.0+ | 用户选择发票抬头的回调，open-type="chooseInvoiceTitle"时有效，百度小程序 | Handler |
| @subscribe V2.3.0+ | 订阅消息授权回调，open-type="subscribe"时有效，百度小程序 | Handler |
| @login V2.3.0+ | 登录回调，open-type="login"时有效，百度小程序 | Handler |
| @im V2.3.0+ | 监听跳转IM的成功回调，open-type="im"时有效，抖音小程序2.68.0+ | Handler |
Button 按钮