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];

绑定位置

通过 offset 属性绑定当前位置，[x, y] 分别为 x轴 和 y轴 的偏移量。

<vd-fab v-model:offset="offset" :gap="gap" />

const gap = [44, 16, 16, 16];
const offset = ref<number[]>([]);

初始距视图位置

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

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

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

操作按钮

默认插槽可自定义操作按钮，通过 v-model 控制是否展示操作栏，通过 direction 属性配置操作栏弹出方向，当一个方向弹出空间不足时，会自动弹出到另一方向。

<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%;
}

自定义按钮

通过 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	-
offset	当前位置	number[]	-
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	操作栏弹出方向	FabDirection	'top'
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
open	操作栏打开时触发	-
opened	操作栏打开动画结束时触发	-
close	操作栏关闭时触发	-
closed	操作栏关闭动画结束时触发	-

Slots

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

Expose

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