Fab 悬浮按钮 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# Fab 悬浮按钮

悬浮动作按钮组件，按下可显示一组动作按钮，支持多种位置和拖动模式。

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	X	√	√

# 基本使用

最简单的使用方式，悬浮按钮会显示在右下角：

<template>
  <u-fab v-model:active="active">
    <u-button type="primary" size="small">按钮1</u-button>
    <u-button type="success" size="small">按钮2</u-button>
    <u-button type="warning" size="small">按钮3</u-button>
  </u-fab>
</template>

<script>
export default {
  data() {
    return {
      active: false
    }
  }
}
</script>
✅ Copy success!

# 位置设置

通过 position 属性可以设置悬浮按钮的位置：

<template>
  <u-fab 
    v-model:active="active" 
    position="left-top"
  >
    <u-button type="primary" size="small">按钮1</u-button>
    <u-button type="success" size="small">按钮2</u-button>
  </u-fab>
</template>
✅ Copy success!

# 拖动模式

通过 draggable 属性可以设置拖动模式：

<template>
  <!-- 自动吸附模式：拖动后自动吸附到屏幕边缘 -->
  <u-fab 
    v-model:active="active" 
    draggable="auto"
  >
    <u-button type="primary" size="small">按钮1</u-button>
  </u-fab>
  
  <!-- 自由拖动模式：可拖动到任意位置 -->
  <u-fab 
    v-model:active="active" 
    draggable="free"
  >
    <u-button type="primary" size="small">按钮1</u-button>
  </u-fab>
  
  <!-- 不可拖动模式：固定位置 -->
  <u-fab 
    v-model:active="active" 
    draggable="none"
  >
    <u-button type="primary" size="small">按钮1</u-button>
  </u-fab>
</template>
✅ Copy success!

# 弹出方向

通过 direction 属性可以设置菜单弹出方向：

<template>
  <u-fab 
    v-model:active="active" 
    direction="top"
  >
    <u-button type="primary" size="small">按钮1</u-button>
    <u-button type="success" size="small">按钮2</u-button>
  </u-fab>
</template>
✅ Copy success!

# 自定义样式

可以通过 type、size 等属性自定义悬浮按钮的样式：

<template>
  <u-fab 
    v-model:active="active"
    type="success"
    size="60"
    :z-index="100"
  >
    <u-button type="primary" size="small">按钮1</u-button>
    <u-button type="success" size="small">按钮2</u-button>
  </u-fab>
</template>
✅ Copy success!

# 自定义图标

可以自定义激活和未激活状态的图标：

<template>
  <u-fab 
    v-model:active="active"
    inactive-icon="plus"
    active-icon="close"
  >
    <u-button type="primary" size="small">按钮1</u-button>
    <u-button type="success" size="small">按钮2</u-button>
  </u-fab>
</template>
✅ Copy success!

# 自定义触发器

通过 trigger 插槽可以自定义触发器：

<template>
  <u-fab v-model:active="active">
    <template #trigger>
      <view class="custom-trigger">
        <u-icon name="star" size="24" color="#fff"></u-icon>
      </view>
    </template>
    <u-button type="primary" size="small">按钮1</u-button>
    <u-button type="success" size="small">按钮2</u-button>
  </u-fab>
</template>

<style>
.custom-trigger {
  width: 56px;
  height: 56px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
</style>
✅ Copy success!

# 不可展开模式

设置 expandable 为 false 可以禁用菜单展开功能，此时点击会触发 click 事件：

<template>
  <u-fab 
    :expandable="false"
    @click="handleClick"
  >
  </u-fab>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('悬浮按钮被点击')
    }
  }
}
</script>
✅ Copy success!

# API

# Fab Props

参数	说明	类型	默认值	可选值
v-model:active	是否激活	Boolean	false	true / false
type	按钮类型	String	primary	primary / success / info / warning / error / default
position	悬浮按钮位置	String	right-bottom	left-top / right-top / left-bottom / right-bottom / left-center / right-center / top-center / bottom-center
draggable	拖动模式	String	auto	auto / free / none
direction	菜单弹出方向	String	top	top / right / bottom / left
disabled	是否禁用	Boolean	false	true / false
inactive-icon	未展开时的图标	String	plus	-
active-icon	展开时的图标	String	close	-
size	悬浮按钮大小	String / Number	56	-
z-index	层级	String / Number	99	-
gap	与边缘的间距	Object	{top: 16, left: 16, right: 16, bottom: 16}	-
expandable	是否可展开	Boolean	true	true / false
custom-style	自定义样式	Object	{}	-

# Fab Events

事件名	说明	回调参数
click	expandable 为 false 时，点击悬浮按钮触发	-
change	菜单状态改变时触发	-
update:active	激活状态改变时触发	active: Boolean

# Fab Slots

名称	说明
default	默认插槽，放置菜单按钮
trigger	自定义触发器

← Ellipsis 文本省略 Cascader 级联选择器 →