# Button 按钮

概述

Button 按钮，支持自定义大小、颜色等。

# 引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "按钮",
  "usingComponents": {
     "fui-button": "/components/firstui/fui-button/fui-button"
  }
}

1
2
3
4
5
6

第二种：在根目录app.json文件中全局引入

  "usingComponents": {
    "fui-button": "components/firstui/fui-button/fui-button"
  }

1
2
3

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 text 属性设置按钮显示文本或者直接使用slot。

<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

注意：可通过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>

TIP

若组件宽度为 100% 时，注意设置外层容器的宽度，避免 flex 布局下，宽度被挤压。若宽度被挤压可在组件外层套个view，将view宽度设置成100%。

# Slots

插槽名称	说明
default	标签内显示内容

# Props

属性名	类型	说明	默认值	其他说明
type	String	按钮类型，可取值：primary、success、 warning、danger、link、purple、gray	primary	-
background	String	按钮背景色，当传入值时type失效	-	-
text	String	按钮显示文本	-	-
color	String	按钮字体颜色	#fff	-
disabledBackground	String	按钮禁用状态下背景色	-	-
disabledColor	String	按钮禁用状态下字体颜色	-	-
borderWidth	String	按钮边框宽度，默认缩放0.5倍 V1.6.0+	1px	-
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	String	margin值	'0'	-
radius	String	圆角大小	16rpx	-
plain	Boolean	是否镂空	false	-
disabled	Boolean	是否禁用	false	-
loading	Boolean	是否显示加载图标	false	-
formType	String	参考小程序官方按钮 (opens new window)formType属性	-	-
openType	String	参考小程序官方按钮 (opens new window)openType属性	-	-
appParameter V1.9.5+	String	打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效	-	-
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	-
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

事件名	说明	回调参数
bind:click	按钮点击事件，设置formType时无需使用	event.detail = { index:自定义参数 }
bind:getuserinfo	参考小程序官方按钮 getuserinfo (opens new window)	返回获取到的用户信息
bind:contact	打开客服会话，参考小程序官方按钮open-type值 contact (opens new window)	如果用户在会话中点击消息卡片后返回应用，可以从 contact 回调中获得具体信息
bind:getphonenumber	获取用户手机号回调，参考小程序官方按钮getphonenumber (opens new window)	手机号信息
bind:error	当使用开放能力时，发生错误的回调，参考小程序官方按钮error (opens new window)	错误回调信息
bind:opensetting	在打开授权设置页并关闭后回调，参考小程序官方按钮opensetting (opens new window)	授权设置信息
bind:chooseavatar V1.9.5+	获取用户头像回调	头像信息
bind:launchapp V1.9.5+	从小程序打开 App 成功的回调	{detail = {} }
bind:agreeprivacyauthorization V2.3.0+	用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效（Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })）	eventhandle
bind:getrealtimephonenumber V2.3.0+	手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用。	eventhandle
bind:sendphonesms V2.5.0+	获取用户手机号回调，open-type=sendPhoneSms时有效	eventhandle

示例预览

← Icon 图标 Footer 页脚 →