外观
Fab 悬浮按钮
约 863 字大约 3 分钟
2025-10-31
悬浮动作按钮组件,按下可显示一组动作按钮,支持多种位置和拖动模式。
基本使用
最简单的使用方式,悬浮按钮会显示在右下角:
<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 | 自定义触发器 |
