# 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
第二种: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
按钮类型

通过 type 属性设置按钮的类型,不传值则默认为 primary

<fui-button type="success">success</fui-button>
<fui-button type="warning">warning</fui-button>
1
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
按钮形状

通过 radius 属性设置按钮圆角大小,从而控制按钮形状。

<fui-button radius="0">方形按钮</fui-button>
<fui-button radius="96rpx">圆形按钮</fui-button>
1
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版本+
phoneNumber V2.5.0+ String 手机号,open-type=sendPhoneSms时有效 - 仅微信小程序支持
smsType V2.5.0+ Number 发送手机验证码的类型,0-作为 wx.phoneSmsLogin 的前置流程 ,1- 作为 wx.miniapp.bindPhone 的前置流程 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
@sendphonesms V2.5.0+ 获取用户手机号回调,open-type=sendPhoneSms时有效,仅微信小程序 Handler

示例预览

# 示例代码地址

FirstUIButton 按钮
Last Updated: 9/2/2024, 11:06:12 PM