Fab 浮动按钮 
概述
Fab 浮动按钮，主要特点是轻盈、便捷、高效，用于在屏幕上执行主要或最常见的操作。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
组件内部使用了 fui-icon（字体图标）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。
一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiFab from "@/components/firstui/fui-fab/fui-fab.vue"
export default {
components:{
fuiFab
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
基础使用
通过 background 属性设置主按钮背景色，position 属性设置显示位置，fabs 属性设置悬浮按钮数据。
<fui-fab :background="background" :position="isLeft?'left':'right'" :fabs="fabs" @click="handleClick"></fui-fab>
1
data() {
return {
isLeft: true,
fabs: [{
name: 'star',
text: '收藏'
}, {
name: 'share',
text: '分享'
}, {
name: 'fabulous',
text: '点赞'
}, {
name: 'comment',
text: '评论'
}],
background: '#465CFF'
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
更换主按钮默认图标
通过 zIndex 属性设置组件层级值，自定义图标直接放入组件默认插槽内即可。
<fui-fab :zIndex="10" @click="fabClick">
<fui-icon name="edit-fill" color="#fff"></fui-icon>
</fui-fab>
1
2
3
2
3
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 主按钮显示内容，用于替换默认加号图标 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| fabs | Array | 悬浮按钮（扩展按钮）数据，具体格式见下方说明 | [ ] | - |
| position | String | 显示位置，可选值：left、right | right | - |
| distance | Number, String | 距离屏幕左侧或右侧距离，单位rpx | 80 | - |
| bottom | Number, String | 距离屏幕底部距离，单位rpx | 120 | - |
| width | Number, String | 按钮宽度（宽高相等），单位rpx | 108 | - |
| background | String | 主按钮背景颜色，扩展按钮如果未设置背景色，则使用主按钮背景色 | #465CFF | 非Nvue端默认为空，可使用css变量（--fui-color-primary）来改变颜色值 |
| color | String | 主按钮字体颜色 | #fff | - |
| mask | Boolean | 是否需要遮罩层 | true | - |
| maskBackground | String | 遮罩层背景色 | rgba(0,0,0,.6) | - |
| maskClosable | Boolean | 点击遮罩层，是否可关闭 | false | - |
| zIndex | Number, String | 悬浮按钮层级z-index值 | 99 | Nvue端不支持，默认越靠后的元素层级越高 |
| isDrag V1.9.8+ | Boolean | 是否可以拖拽移动位置，仅可以在当前屏幕内移动 | false | - |
//fabs 悬浮按钮（扩展按钮）数据格式
//以下数据属性为约定属性值，其他属性可自行扩展
//注意：扩展按钮中内容显示优先级为：字体图标 > 图片图标 > abbr（简写文本）,且必选其一传值
[{
//字体图标name值，参考 fui-icon 组件
name:'star',
//图片图标src地址，可选
src: "static/images/fab/fab_reward.png",
//图片宽度，单位rpx，可选
width：64，
//图片高度，单位rpx，可选
height:64,
//图片圆角值，单位rpx，可选
radius:0,
//按钮标题文本，可选
text: "收藏",
//按钮标题文本字体大小，单位rpx，可选
size: 30,
//按钮标题文本字体颜色，可选
color: "#fff",
//按钮标题简写文本（1~2个字符），可选
abbr:"按钮文本简写，2个字符以内",
//按钮标题简写文本字体大小 或 字体图标颜色，可选
abbrSize:80,
//按钮标题简写文本颜色 或 字体图标颜色，可选
abbrColor:'#fff',
//按钮背景色，可选
background: "#465CFF"
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击扩展按钮 或 无扩展按钮时点击主按钮时触发 | { index:按钮索引值 } |
| @change | 有扩展按钮时切换显示时触发 | { isShow:是否显示 } |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。