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

基本使用

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

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

<script>
export default {
  data() {
    return {
      active: false
    }
  }
}
</script>

位置设置

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

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

拖动模式

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

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

弹出方向

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

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

自定义样式

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

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

自定义图标

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

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

自定义触发器

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

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

不可展开模式

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

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

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

API

Fab Props

参数	说明	类型	默认值
v-model:active	是否激活	Boolean	false
type	按钮类型	Enum	primary
position	悬浮按钮位置	Enum	right-bottom
draggable	拖动模式	Enum	auto
direction	菜单弹出方向	Enum	top
disabled	是否禁用	Boolean	false
inactive-icon	未展开时的图标	String	plus
active-icon	展开时的图标	String	close
size	悬浮按钮大小	String / Number	56
z-index	层级	String / Number	99
gap	与边缘的间距	Array<Number>	[16, 16, 16, 16]
expandable	是否可展开	Boolean	true

Fab Events

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

Fab Slots

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