Button 按钮

该组件内部实现以 uni-app 的 button 组件为基础，进行二次封装并进行了一些扩展，使其能够在 uni-app 的跨端各个平台上表现一致。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

<!-- 文字内容通过slot传入 -->
<fu-button>碧月</fu-button>

<!-- 文字内容通过text传入 -->
<fu-button text="碧月"></fu-button>

注：之所以增加 props 传入，是因为 slot 传入在 nvue 中无法控制文字的样式

设置按钮的主题

通过 type 设置按钮的主题，可选值primary、success、warning、info、error

<fu-button text="主要按钮" size="normal" type="primary"></fu-button>
<fu-button text="成功按钮" size="normal" type="success"></fu-button>
<fu-button text="信息按钮" size="normal" type="info"></fu-button>
<fu-button text="警告按钮" size="normal" type="warning"></fu-button>
<fu-button text="危险按钮" size="normal" type="error"></fu-button>

设置按钮形状

通过 shape 默认值为 square(圆角矩形)，设置 circle 两边为半圆形

<fu-button text="青衫" size="normal" shape="square"></fu-button>
<fu-button text="折扇" size="normal" shape="circle"></fu-button>

设置按钮尺寸

通过 size 设置按钮的尺寸，可选值large、normal、small、mini

<fu-button text="超大尺寸" size="large"></fu-button>
<fu-button text="普通尺寸" size="normal"></fu-button>
<fu-button text="小型尺寸" size="small"></fu-button>
<fu-button text="mini尺寸" size="mini"></fu-button>

设置按钮镂空状态

通过 plain 设置按钮的镂空状态，即按钮背景颜色透明，边框和文字颜色同色

<fu-button text="镂空按钮" plain></fu-button>

<!-- 或者显示设置为true -->
<fu-button text="镂空按钮" :plain="true"></fu-button>

如何修改按钮的样式

1. 针对非微信小程序平台，组件的根元素就是uni-app button组件，所以修改按钮的样式很容易，直接给组件定义 类名 或者嵌入 内联样式 即可。
2. 如果是微信小程序，编译后页面会有组件同名的元素存在，导致样式传递有问题。
3. 如果是为了修改按钮与其他元素之间的距离或宽度等，可以给按钮外层套一个 view 元素，控制这个 view 与其他元素的距离或者宽度，即可达到同等效果。
4. 如果使用插槽修改字体大小、颜色需要使用customStyle，因为customTextStyle只有针对text属性生效

因此：我们提供了一个 customClass 和 customStyle 属性，推荐用户可以用对象形式传递样式给组件内部。

<template>
    <!-- 通过customClass修改按钮的样式 -->
    <fu-button customClass="custom-class"></fu-button>

    <!-- 通过customStyle修改按钮的样式 -->
    <fu-button :customStyle="customStyle" customTextStyle="customTextStyle"></fu-button>
</template>

<script setup>
    import { reactive } from 'vue';

    // data数据
    const customStyle = reactive({
        width: '500rpx'
    });
    const customTextStyle = reactive({
        color: '#333333'
    })
</script>

<style scoped>
    /* 自定义class样式 */
    :deep(.custom-class) {
        width: 500rpx;
        color: #333333
    }
</style>

API

Button Props

属性名	说明	类型	默认值	可选值
index	按钮索引，用于区分多个按钮	String｜Number	0	-
text	按钮文字	String｜Number	-	-
type	按钮主题	String	primary	primary/ success/ warning/ info/ error
shape	按钮形状	String	square	circle
width	按钮宽度	String｜Number	-	-
height	按钮高度	String｜Number	-	-
color	按钮颜色	String	支持传入 linear-gradient渐变色	-
size	按钮尺寸	String	normal	large/ normal/ small/ mini
margin	按钮外边距	String	-	-
plain	按钮镂空状态	Boolean	false	true
disabled	按钮禁用状态	Boolean	false	true
loading	按钮加载状态	Boolean	false	true
loadingText	按钮加载文案	String	-	-
loadingMode	按钮加载模式	String	spinner	circle
loadingSize	按钮加载尺寸	String｜Number	14	-
formType	触发form表单的事件类型	String	-	-
openType	按钮开放能力	String	请参考uni-app官方文档	-
hoverStopPropagation	指定是否阻止本节点的 祖先节点出现点击状态	Boolean	false	true
sessionFrom	会话来源	String	请参考uni-app官方文档	-
sendMessageTitle	会话内消息卡片标题	String	请参考uni-app官方文档	-
sendMessagePath	会话内消息卡片 点击跳转小程序路径	String	请参考uni-app官方文档	-
sendMessageImg	会话内消息卡片图片	String	请参考uni-app官方文档	-
showMessageCard	显示会话内消息卡片	Boolean	false	true
hoverStartTime	按住后多久出现点击态， 单位毫秒	String｜Number	0	-
hoverStayTime	手指松开后点击态保留时间， 单位毫秒	String｜Number	200	-
scene	点击事件防抖/节流场景	String	-	-
sceneTime	点击事件防抖/节流时间	Number	300	-
lang	指定返回用户信息的语言， zh_CN 简体中文， zh_TW 繁体中文， en 英文	String	en	-
customClass	定义需要用到的外部类	String	-	-
customStyle	定义需要用到的外部样式	Object｜String	-	-
customTextStyle	自定义按钮文本样式	Object｜String	-	-

Button Events

事件名	说明	回调参数
click	按钮点击触发	() => void
getphonenumber	获取用户手机号	(event: any) => void
getuserinfo	获取用户信息	(event: any) => void
error	当使用开放能力时，发生错误的回调	(event: any) => void
opensetting	在打开授权设置页并关闭后回调	(event: any) => void
launchapp	从小程序打开 App 成功的回调	(event: any) => void
chooseavatar	获取用户头像回调	(event: any) => void
contact	客服消息回调	(event: any) => void
agreeprivacyauthorization	用户同意隐私协议事件回调	(event: any) => void
addgroupapp	添加群应用的回调	(event: any) => void
chooseaddress	调起用户编辑并选择收货地址的回调	(event: any) => void
chooseinvoicetitle	用户选择发票抬头的回调	(event: any) => void
subscribe	订阅消息授权回调	(event: any) => void
login	登录回调	(event: any) => void
im	监听跳转IM的成功回调	(event: any) => void

Button Slots

插槽名	说明
default	标签显示内容，按钮内显示内容可自定义