Fab 悬浮按钮

固定于窗口角落悬浮的高级操作按钮，支持多级菜单展开、高斯毛玻璃遮罩、主图标旋转动画与 4 角固定定位。

---

代码示例

1. 多级展开悬浮菜单 (Expandable Fab)

<template>
  <mu-fab
    placement="bottom-right"
    :items="menuList"
    icon="plus"
    @item-click="onItemClick"
  />
</template>

<script setup>
import { ref } from 'vue'

const menuList = ref([
  { text: '发布动态', icon: 'edit' },
  { text: '分享页面', icon: 'share' },
  { text: '联系客服', icon: 'user' }
])

function onItemClick({ index, item }) {
  console.log('点击菜单项:', item.text)
}
</script>

---

2. 单快捷悬浮按钮 (Single Fab)

不传入 items 列表时，点击直接触发 @click 事件。

<template>
  <mu-fab
    placement="bottom-left"
    icon="edit"
    bg-color="#8B5CF6"
    @click="onClick"
  />
</template>

<script setup>
function onClick() {
  console.log('触发快捷悬浮按钮点击！')
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
items	展开的二级菜单数据列表 [{ text, icon, bgColor, color }]	Array	-	[]
placement	悬浮固定定位方向	String	bottom-right | bottom-left | top-right | top-left	'bottom-right'
offset	距离窗口边缘偏移量 [vertical, horizontal] (rpx)	Array	-	[60, 40]
icon	主按鈕中心图标名称	String	-	'plus'
activeIcon	菜单展开时主按鈕切换的图标名称	String	-	''（默认旋转当前 icon）
iconSize	主按鈕图标尺寸 (rpx)	Number | String	-	24
bgColor	主按鈕背景颜色	String	-	'#171717'
size	主按鈕尺寸 (rpx)	Number | String	-	104
mask	展开菜单时是否开启高斯毛玻璃遗罩	Boolean	true | false	true
autoClose	点击子菜单后是否自动收起	Boolean	true | false	true
zIndex	图层 z-index	Number	-	999

---

事件说明 (Events)

事件名	说明	回调参数
click	点击单悬浮按鈕（未配置 items）时触发	-
item-click	点击展开子菜单项时触发	(res: { index: number, item: object })
open	菜单展开时触发	-
close	菜单收起时触发	-
change	菜单展开/收起状态变化时触发	(isOpen: boolean)

---

实例属性 (Expose)

属性/方法名	说明
isOpen	当前菜单是否展开状态（只读 ref）

---

插槽说明 (Slots)

插槽名	说明
default	主悬浮按鈕内部自定义内容插槽