主题
Fab 浮动按钮
在屏幕边缘展示主按钮，可展开多个扩展按钮。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 浮动按钮 -->
<fui-fab :fabs="actions" @click="handleFabClick" />在页面定义 actions 与 handleFabClick。扩展项可使用 name 图标名、src 图片地址或 abbr 简写文字，并可通过 text 提供说明。
属性
除层级和平台参数外，尺寸和距离单位为 rpx。
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| fabs | Array | 扩展按钮数据 | [] |
| nameKey | String | 图标名字段 | name |
| srcKey | String | 图片地址字段 | src |
| textKey | String | 文字字段 | text |
| position | String | 屏幕位置：left 或 right | right |
| distance | Number / String | 距屏幕侧边距离 | 80 |
| bottom | Number / String | 距屏幕底部距离 | 120 |
| width | Number / String | 按钮宽高 | 108 |
| background | String | 主按钮及默认扩展按钮背景色 | #465CFF |
| color | String | 主按钮内容颜色 | #fff |
| mask | Boolean | 是否显示遮罩 | true |
| maskBackground | String | 遮罩颜色 | rgba(0,0,0,.6) |
| maskClosable | Boolean | 点击遮罩是否关闭扩展按钮 | false |
| zIndex | Number / String | 层级，nvue 不支持 | 99 |
| isDrag | Boolean | 是否允许在屏幕内拖动 | false |
| openType | String | 主按钮的 uni-app 开放能力类型 | - |
| appParameter | String | 微信小程序打开 App 时的参数 | - |
| lang | String | 微信小程序返回用户信息的语言 | en |
| sessionFrom | String | 微信小程序客服会话来源 | - |
| sendMessageTitle | String | 客服消息卡片标题 | 当前标题 |
| sendMessagePath | String | 客服消息卡片路径 | 当前分享路径 |
| sendMessageImg | String | 客服消息卡片图片 | 截图 |
| showMessageCard | Boolean | 是否显示客服消息卡片 | false |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| click | 点击扩展按钮或无扩展项时点击主按钮 | { index } |
| change | 扩展按钮显示状态变化 | { isShow } |
| opensetting | 关闭授权设置页 | 平台授权设置信息 |
| launchapp | 从小程序打开 App 成功 | 平台事件 |
| contact | 客服会话回调，本地源码声明 | 平台事件 |
非 nvue 的默认主色由 --fui-color-primary 控制；nvue 中元素顺序影响层级。
插槽
| 插槽 | 说明 |
|---|---|
| default | 替换主按钮的默认图标 |