Fab 悬浮按钮

悬浮动作按钮组件，按下可显示一组动作按钮。

WARNING

因为 uni-app 组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 fab ，建议使用组件库的 useQueue hook（会关闭所有 dropmenu、popover、toast、swipeAction、fab），在页面的根元素上监听点击事件的冒泡。

如果存在用户手动点击 fab 以外某个地方如按钮滑出 fab 的场景，则需要在点击的元素（在这里是按钮）加上 @click.stop="" 阻止事件冒泡到根元素上，避免触发 closeOutside 把要手动打开的 fab 关闭了。

组件类型

基本用法

通过 type 设置悬浮按钮触发器的类型，disabled 设置悬浮按钮是否禁用。

vue/html

<wd-fab :type="type">
  <wd-button @click="showToast('一键三连')" custom-class="custom-button" type="primary" round>
    <wd-icon name="github-filled" size="22px"></wd-icon>
  </wd-button>
  <wd-button @click="showToast('我要收藏')" custom-class="custom-button" type="success" round>
    <wd-icon name="star" size="22px"></wd-icon>
  </wd-button>
  <wd-button @click="showToast('我要投币')" custom-class="custom-button" type="danger" round>
    <wd-icon name="money-circle" size="22px"></wd-icon>
  </wd-button>
  <wd-button @click="showToast('我要点赞')" custom-class="custom-button" type="warning" round>
    <wd-icon name="thumb-up" size="22px"></wd-icon>
  </wd-button>
</wd-fab>

typescript

import { ref } from 'vue'
import { useToast } from '@/uni_modules/wot-ui'
import type { FabType } from '@/uni_modules/wot-ui/components/wd-fab/types'

const { show: showToast } = useToast()
const type = ref<FabType>('primary')

scss

:deep(.custom-button) {
  min-width: auto !important;
  box-sizing: border-box;
  width: 32px !important;
  height: 32px !important;
  border-radius: 16px !important;
  margin: 8rpx;
}

组件变体

位置与方向

通过 position 设置悬浮按钮触发器的位置，direction 设置动作按钮的打开方向。

vue/html

<wd-fab :position="position" :direction="direction">
  <wd-button @click="showToast('一键三连')" custom-class="custom-button" type="primary" round>
    <wd-icon name="github-filled" size="22px"></wd-icon>
  </wd-button>
  <wd-button @click="showToast('我要收藏')" custom-class="custom-button" type="success" round>
    <wd-icon name="star" size="22px"></wd-icon>
  </wd-button>
</wd-fab>

typescript

import { ref } from 'vue'
import { useToast } from '@/uni_modules/wot-ui'
import type { FabPosition, FabDirection } from '@/uni_modules/wot-ui/components/wd-fab/types'

const { show: showToast } = useToast()
const position = ref<FabPosition>('left-bottom')
const direction = ref<FabDirection>('top')

组件状态

动作菜单展开/收起

通过 v-model:active 控制动作按钮菜单的展开/收起。

vue/html

<wd-button @click="active = !active">切换展示</wd-button>
<wd-fab v-model:active="active"></wd-fab>

typescript

import { ref } from 'vue'

const active = ref<boolean>(false)

可拖动按钮

设置 draggable 属性为 true 开启按钮拖动能力。

vue/html

<wd-fab :draggable="true"></wd-fab>

WARNING

开启拖动后 direction 属性将失效，会根据拖动后的位置自动计算弹出方向。拖动完成后按钮将会自动吸边。

特殊样式

自定义触发器

通过 trigger 插槽自定义触发器，expandable 控制点击触发器是否触发默认内部的展开/收起能力。

vue/html

<wd-fab position="left-bottom" :expandable="false">
  <template #trigger="{ disabled }">
    <wd-button @click="handleClick" icon="share" type="danger" :disabled="disabled">分享给朋友</wd-button>
  </template>
</wd-fab>

typescript

import { useToast } from '@/uni_modules/wot-ui'

const { show: showToast } = useToast()

const handleClick = () => {
  showToast('分享给朋友')
}

Attributes

参数	说明	类型	默认值
v-model:active v0.1.57	是否激活	boolean	false
type v0.1.57	悬浮按钮类型，可选值为 primary、success、info、warning、danger	FabType	'primary'
position v0.1.57	悬浮按钮位置，可选值为 left-top、right-top、left-bottom、right-bottom、left-center、right-center、top-center、bottom-center	FabPosition	'right-bottom'
draggable v1.2.19	按钮能否拖动	boolean	false
direction v0.1.57	悬浮按钮菜单弹出方向，可选值为 top、right、bottom、left	FabDirection	'top'
disabled v0.1.57	是否禁用	boolean	false
inactive-icon v0.1.57	悬浮按钮未展开时的图标	string	'plus'
active-icon v0.1.57	悬浮按钮展开时的图标	string	'close'
z-index v0.1.57	自定义悬浮按钮层级	number	99
gap v1.2.26	自定义悬浮按钮与可视区域边缘的间距	FabGap	{ top: 16, right: 16, bottom: 16, left: 16 }
expandable v1.3.11	用于控制点击时是否展开菜单，设置为 false 时触发 click 事件	boolean	true
custom-class	根节点自定义类名	string	''
custom-style	根节点自定义样式	string	''

FabGap

参数	说明	类型
top	距离顶部间距	number
bottom	距离底部间距	number
left	距离左边间距	number
right	距离右边间距	number

Events

事件名称	说明	参数
click	expandable 设置为 false 时，点击悬浮组件内部但不触发内部逻辑时则抛出版事件 v1.3.11	-

Methods

方法名	说明	参数
open	展开菜单 v0.1.57	-
close	收起菜单 v0.1.57	-

Slots

name	说明
default	动作按钮区域内容 v0.1.57
trigger	触发器插槽，用于完全自定义点击触发锚点区域 v1.3.11

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-fab-trigger-width	$n-60	浮动按钮触发器宽度
--wot-fab-trigger-height	$n-60	浮动按钮触发器高度
--wot-fab-actions-padding	$padding-extra-loose	动作列表主轴内边距
--wot-fab-z-index	99	浮动按钮层级
--wot-fab-transition-offset	$n-40	动作按钮展开/收起动画偏移距离
--wot-fab-trigger-icon-size	$n-32	浮动按钮触发器图标大小

源代码

文档

• 组件