Fab 悬浮按钮

介绍

悬浮动作按钮，可移动和边缘吸附，支持设置按钮动作组，在按钮按下时展示。

基础用法

通过 axis 属性配置可限制移动方向，通过 gap 属性配置浮动操作按钮与视窗的最小间距。

<vd-fab axis="xy" :gap="gap" />

const gap = [44, 16, 16, 16];

边缘吸附

通过 adsorb 属性配置是否自动边缘吸附，移动后会吸附到视窗的指定轴边缘上。

<vd-fab :gap="gap" adsorb="x" />

const gap = [44, 16, 16, 16];

初始距视图位置

通过 right 和 bottom 属性设置初始距视图位置。

<vd-fab :gap="gap" right="36" bottom="120" />

const gap = [44, 16, 16, 16];

操作按钮

默认插槽可自定义操作按钮，通过 v-model 控制是否展示操作栏，通过 direction 属性配置操作栏弹出方向。线性模式下空间不足时优先翻到对侧（上↔下、左↔右），对侧仍不够再看相邻方向；圆形模式（含自定义 circle-arc）：当前半径下完整基准可放则保持原跨度；空间不足时由 circle-avoid 控制（auto 先压角再缩半径，arc 只压角，radius 只缩半径，none 不避让）。圆形避让会按子项实测最大半宽半高内缩可用空间（未测到时用主按钮尺寸兜底）。

<vd-fab v-model="show" :gap="gap" direction="left">
  <vd-button type="primary" icon="like" />
  <vd-button type="success" icon="star" />
  <vd-button type="warning" icon="coin" />
</vd-fab>

const show = ref(false);
const gap = [44, 16, 16, 16];

.vd-fab .vd-button {
  font-size: 18px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

圆形展开

通过 circle 开启圆形展开，配合 vd-fab-item 使用。direction 决定默认扇形（上 / 右 / 下 / 左半圆，如右为 [-90, 90]）；避让：按子项半尺寸内缩 → 归一化 circle-arc → 空间足够则保持完整基准 → circle-avoid（默认 auto）时优先保持原始跨度旋转避让（如 [0,-45] → [-90,-45]），滑不动再在不超过原始跨度内裁角；角向已能放下则不缩半径，仍不够才缩半径。circle-avoid 可选 auto / arc / radius / none。circle-radius 为期望半径（支持 CSS 尺寸，经 Offset 换算为实际 px），circle-arc 可覆盖起止角（0° 正右、逆时针为正）。循环时请传入 index。

<vd-fab
  v-model="show"
  :gap="gap"
  direction="top"
  circle
  :circle-radius="75"
>
  <vd-fab-item
    v-for="(item, index) in actions"
    :key="index"
    :index="index"
  >
    <vd-button :type="item.type" :icon="item.icon" />
  </vd-fab-item>
</vd-fab>

const show = ref(false);
const gap = [44, 16, 16, 16];
const actions = [
  { type: 'primary', icon: 'like' },
  { type: 'success', icon: 'star' },
  { type: 'warning', icon: 'coin' },
];

自定义按钮

通过 trigger 插槽可自定义触发按钮。

<vd-fab :gap="gap">
  <template #trigger>
    <view class="fab-trigger">
      <vd-icon name="coin" />
      <view class="txt">新增</view>
    </view>
  </template>
</vd-fab>

const gap = [44, 16, 16, 16];

.fab-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 4px;

  .vd-icon {
    margin-bottom: 6px;
    font-size: 18px;
  }

  .txt {
    font-size: 10px;
    line-height: 1;
  }
}

API

Props

参数	说明	类型	默认值
v-model	操作栏是否展示	boolean	-
right	初始距视图右边缘距离	string | number	-
bottom	初始距视图下边缘距离	string | number	-
axis	可移动方向	FabAxis	'xy'
gap	浮动操作按钮与视窗的最小间距	FabGap	[44, 16, 16, 16]
gap-navbar	顶部间距是否自动添加导航栏高度	boolean	true
gap-tabbar	底部间距是否自动添加标签栏高度	boolean	true
adsorb	自动边缘吸附	FabAdsorb	-
direction	操作栏弹出方向；circle 时同时决定默认扇形朝向	FabDirection	'top'
circle	是否圆形展开	boolean	false
circle-radius	圆形展开半径，支持 CSS 尺寸；仅 circle 时生效	string | number	75
circle-arc	圆形展开扇形起止角，单位 deg；仅 circle 时生效，未传按 direction 推导	FabCircleArc	-
circle-avoid	圆形展开避让方式；auto 先压角再缩半径，arc 只压角，radius 只缩半径，none 不避让	FabCircleAvoid	'auto'
icon	按钮图标	IconsName	'add'
moveable	是否允许移动	boolean	true
lazy-render	是否懒渲染	boolean	true
z-index	层级	number	2001+

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
update:model-value	操作栏展示状态更新时触发	boolean
open	操作栏打开时触发	-
opened	操作栏打开动画结束时触发	-
close	操作栏关闭时触发	-
closed	操作栏关闭动画结束时触发	-

Slots

名称	说明
default	操作栏内容
trigger	操作按钮

FabItem Props

参数	说明	类型	默认值
index	索引，循环时设置该值防止顺序异常	string | number	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

FabItem Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

FabItem Slots

名称	说明
default	操作项内容

Expose

方法名	说明	参数	返回值
update	手动触发位置计算	-	Promise<void>

类型定义

组件导出以下类型定义：

import type {
  FabAxis,
  FabGap,
  FabAdsorb,
  FabDirection,
  FabCircleArc,
  FabCircleAvoid,
  FabExpose,
  FabInstance,
  FabItemInstance,
} from 'vital-design';