Fast-UI

# fu-button 按钮

# 平台差异

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序
√ √ √ √ √ √

# 基本使用

<template>
  <view>
    <fu-button class="button">Default</fu-button>
    <fu-button class="button" type="primary">Primary</fu-button>
    <fu-button class="button" type="success">Success</fu-button>
    <fu-button class="button" type="warning">Warning</fu-button>
    <fu-button class="button" type="error">Error</fu-button>
    <fu-button class="button" type="info">Info</fu-button>
    <fu-button class="button" shape="circle" type="primary">圆角</fu-button>
    <fu-button class="button" plain shape="circle">镂空</fu-button>
    <fu-button class="button" :loading="true" plain shape="circle">加载中</fu-button>
    <fu-button class="button" ripple shape="circle" type="primary">水波纹</fu-button>
    <fu-button class="button" ripple shape="circle" disabled type="primary">禁用</fu-button>
    
  </view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 防抖按钮

  • 可以通过throttle-time设置节流事件，单位ms
<template>
  <view>
    <!-- 防抖按钮 -->
    <fu-button class="button" ripple shape="circle" throttle-time="2000" type="primary">自定义节流时间</fu-button>
  </view>
</template>
1
2
3
4
5
6

# API

# Props

参数 说明
类型
默认值
可选值
平台差异
size 按钮的大小 String default medium / mini -
ripple 是否开启点击水波纹效果 Boolean false true -
ripple-bg-color 水波纹的背景色，ripple为true时有效 String rgba(0, 0, 0, 0.15) - -
type 按钮的样式类型 String default primary / success / info/ warning / error -
plain 按钮是否镂空，背景色透明 Boolean false true -
disabled 是否禁用 Boolean false true -
hair-line 是否显示按钮的细边框 Boolean true false -
shape 按钮外观形状，见上方说明 String square circle -
loading 按钮名称前是否带 loading 图标 Boolean false true App-nvue 平台，在 ios 上为雪花，Android上为圆圈
form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 String - submit / reset -
open-type 开放能力 String 请参考uni-app方文档 - -
hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 String button-hover - App-nvue 平台暂不支持
hover-start-time 按住后多久出现点击态，单位毫秒 String / Number 20 - -
hover-stay-time 手指松开后点击态保留时间，单位毫秒 String / Number 150 - -
custom-style 对按钮的自定义样式，对象形式，见上方说明 Object - - -
app-parameter 指定是否阻止本节点的祖先节点出现点击态 Boolean false true 微信小程序、QQ小程序
hover-stop-propagation 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 Boolean false true 微信小程序
lang 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 String en zh_CN \ zh_TW 微信小程序
session-from 会话来源，open-type ="contact"时有效 String - -
send-message-title 会话内消息卡片标题，open-type="contact"时有效 String 当前标题 - 微信小程序
send-message-path 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 String 当前分享路径 - 微信小程序
send-message-img 会话内消息卡片图片，open-type="contact"时有效 String 当前页面截图 - 微信小程序
show-message-card 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 String - - 微信小程序
throttle-time 节流的时间间隔(一定时间内无论点击多少次，只会触发一次click事件)，单位ms，详见节流防抖 String / Number 1000 - -

# Events

事件名 说明
click 按钮点击，请勿使用@tap点击事件，微信小程序无效，返回值为点击事件及参数
getphonenumber open-type="getPhoneNumber"时有效
getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
error 当使用开放能力时，发生错误的回调
opensetting 在打开授权设置页并关闭后回调
launchapp 打开 APP 成功的回调

fu-notwork 断网检测