Button 按钮

按钮用于触发操作，可设置类型、尺寸、禁用和加载状态。以下示例基于本地 V2.3.0 源码整理。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

引入组件

路径以当前组件目录为例；如果项目已配置 easycom，可使用项目的自动注册方式。

import FuiButton from '@/components/fui-button/fui-button.vue';

export default {
  components: {
    // 按钮组件
    FuiButton
  }
};

代码演示

设置文本和类型

使用 text 设置文字，也可以使用默认插槽。类型支持 primary、success、warning、danger、link、purple 和 gray。

vue

<!-- 常规操作按钮 -->
<fui-button text="保存"></fui-button>

<!-- 成功状态按钮 -->
<fui-button type="success">完成</fui-button>

禁用和加载状态

disabled 控制是否允许操作，loading 控制加载图标。提交期间可以同时设置两者，避免重复提交。

vue

<!-- 提交期间禁止重复操作 -->
<fui-button text="提交" :disabled="isSubmitting" :loading="isSubmitting"></fui-button>

尺寸和外观

btnSize 支持 medium、small 和 mini，其尺寸优先于 width、height。也可以设置圆角、边框和颜色。

vue

<!-- 小尺寸按钮 -->
<fui-button text="查看" btnSize="small"></fui-button>

<!-- 轮廓按钮 -->
<fui-button text="取消" plain borderColor="#465CFF" color="#465CFF"></fui-button>

处理点击

click 事件接收包含 index 的对象；组件会将其转成数字。禁用时不会触发点击事件。

vue

<template>
  <!-- 带自定义索引的按钮 -->
  <fui-button text="查看" :index="1" @click="handleClick"></fui-button>
</template>

<script>
export default {
  methods: {
    /** 处理按钮点击 */
    handleClick({ index }) {
      uni.showToast({ title: `点击了第 ${index} 项`, icon: 'none' });
    }
  }
};
</script>

nvue 提示

使用插槽时需由插槽内容处理文字样式；需要通过组件属性统一控制文字样式时可使用 text。

属性

属性	说明	类型	官网默认值
type	样式类型：primary，success， warning，danger，link，purple，gray	String	'primary'
background	按钮背景色，当传入值时type失效	String	''
text	按钮显示文本	String	''
color	按钮字体颜色	String	'#fff'
disabledBackground	按钮禁用背景色	String	''
disabledColor	按钮禁用字体颜色	String	''
borderWidth	按钮边框宽度	String	nvue 为 '0.5px'，其他平台为 '1px'
borderColor	按钮边框颜色	String	''
btnSize	V1.9.8+ 按钮大小，优先级高于width和height，medium、small、mini	String	''
width	宽度	String	'100%'
height	高度	String	'96rpx'
size	字体大小，单位rpx	[Number, String]	32
bold	按钮文字是否加粗	Boolean	false
margin	['20rpx','30rpx','20rpx','30rpx']->[上，右，下，左]	Array	['0', '0']
radius	圆角	String	'16rpx'
plain	是否使用透明背景的镂空样式	Boolean	false
disabled	是否禁用按钮	Boolean	false
loading	是否显示加载图标	Boolean	false
formType	表单按钮类型，传递给 uni-app 原生 button	String	''
openType	开放能力类型，传递给 uni-app 原生 button	String	''
scope	当 open-type 为 getAuthorize 时，可以设置 scope 为：phoneNumber、userInfo	String	''
appParameter	打开 App 时传递的参数，用于对应的开放能力	String	''
hoverStopPropagation	是否阻止祖先节点出现点击态	Boolean	false
lang	获取用户信息时使用的语言	String	'en'
sessionFrom	客服会话来源	String	''
sendMessageTitle	客服会话消息卡片的标题	String	当前标题
sendMessagePath	客服会话消息卡片的跳转路径	String	当前分享路径
sendMessageImg	客服会话消息卡片的图片地址	String	截图
showMessageCard	是否显示客服会话消息卡片	Boolean	false
phoneNumberNoQuotaToast	手机号验证额度用尽时是否显示提示	Boolean	true
groupId	打开群资料卡时使用的群号	String	''
guildId	打开频道页面时使用的频道号	String	''
publicId	打开公众号资料卡时使用的号码	String	''
dataImId	抖音客服账号，供 IM 开放能力使用	String	''
dataImType	IM 消息卡片类型	String	''
dataGoodsId	IM 消息卡片关联的商品 ID	String	''
dataOrderId	IM 消息卡片关联的订单 ID	String	''
dataBizLine	IM 消息卡片关联的业务类型	String	''
phoneNumber	发送短信时使用的手机号，V2.5.0 起支持	String	''
smsType	发送短信验证码的类型，V2.5.0 起支持	Number	0
index	点击事件返回的自定义索引	[Number, String]	0

表中默认值参考官网说明；部分值由全局配置或平台原生按钮决定，与本地 props 的初始值可能不同。phoneNumber 和 smsType 在当前本地组件中未声明，需升级组件后使用。

事件

事件	说明	回调参数
click	点击按钮时触发；设置 formType 时可使用表单事件	`{ index }`
getuserinfo	获取用户信息后的回调	用户信息，取决于平台开放能力
contact	客服会话回调	会话事件信息
getphonenumber	获取手机号后的回调	平台返回的手机号相关信息
error	开放能力调用失败	平台错误信息
opensetting	授权设置页面关闭后触发	授权设置信息
chooseavatar	选择头像后触发	头像信息；微信小程序
launchapp	从小程序成功打开 App	平台事件
agreeprivacyauthorization	用户同意隐私协议	微信小程序；`openType` 为 `agreePrivacyAuthorization`
addgroupapp	添加群应用	QQ 小程序；`openType` 为 `addGroupApp`
chooseaddress	选择收货地址	百度小程序；`openType` 为 `chooseAddress`
chooseinvoicetitle	选择发票抬头	百度小程序；`openType` 为 `chooseInvoiceTitle`
subscribe	订阅消息授权	百度小程序；`openType` 为 `subscribe`
login	登录回调	百度小程序；`openType` 为 `login`
im	成功跳转 IM	抖音小程序；`openType` 为 `im`
sendphonesms	获取手机号相关回调	微信小程序；`openType` 为 `sendPhoneSms`

sendphonesms 为官网 V2.5.0 起的接口，当前本地组件未声明；开放能力的具体参数取决于目标平台。

插槽

插槽	说明
default	按钮内的内容

Button 按钮 ​

支持平台 ​

引入组件 ​

代码演示 ​

设置文本和类型 ​

禁用和加载状态 ​

尺寸和外观 ​

处理点击 ​

属性 ​

事件 ​

插槽 ​