BizFloatButton 悬浮动作按钮

固定停靠于视口四角的悬浮动作按钮（FAB）：点击展开快捷菜单列、可拖动换位（释放后吸附最近的左右边缘）、可追加内置「返回顶部」小按钮。

适用于门户首页、H5 活动页、大屏等需要常驻快捷入口的场景（联系客服、快捷导航、回顶部）。组件不含业务动作——菜单点击经 menu-click 外抛，由业务侧路由 / 弹窗接管。

基础用法

menus 配置菜单项（图标 + 文案），点击主按钮展开 / 收起；offset 控制距停靠角偏移（demo 调低避免遮挡文档操作）。

<script setup lang="ts">
/** 基础用法：停靠右下角，menus 展开快捷操作，动作经 menu-click 外抛 */
import { ElMessage } from 'element-plus'
import { Headset, Printer, Share } from '@element-plus/icons-vue'
import { BizFloatButton } from 'vue3-ep-biz-lib'
import type { BizFloatMenuItem } from 'vue3-ep-biz-lib'

const menus: BizFloatMenuItem[] = [
  { key: 'service', label: '联系客服', icon: Headset },
  { key: 'share', label: '分享页面', icon: Share },
  { key: 'print', label: '打印本页', icon: Printer },
]

const onMenuClick = (item: BizFloatMenuItem): void => {
  ElMessage.success(`触发「${item.label}」——业务侧在此路由 / 弹窗接管`)
}
</script>

<template>
  <BizFloatButton tooltip="快捷操作" :menus="menus" :offset="[24, 96]" @menu-click="onMenuClick" /></template>

显示代码

返回顶部与方形按钮

占位内容第 1 段：向下滚动页面，右下角出现返回顶部按钮

占位内容第 2 段：向下滚动页面，右下角出现返回顶部按钮

占位内容第 3 段：向下滚动页面，右下角出现返回顶部按钮

占位内容第 4 段：向下滚动页面，右下角出现返回顶部按钮

占位内容第 5 段：向下滚动页面，右下角出现返回顶部按钮

占位内容第 6 段：向下滚动页面，右下角出现返回顶部按钮

占位内容第 7 段：向下滚动页面，右下角出现返回顶部按钮

占位内容第 8 段：向下滚动页面，右下角出现返回顶部按钮

占位内容第 9 段：向下滚动页面，右下角出现返回顶部按钮

占位内容第 10 段：向下滚动页面，右下角出现返回顶部按钮

占位内容第 11 段：向下滚动页面，右下角出现返回顶部按钮

占位内容第 12 段：向下滚动页面，右下角出现返回顶部按钮

实际使用时滚动的是页面本身——文档站页面即可直接体验。

back-top 追加内置返回顶部按钮（滚动超过 back-top-height 出现，平滑滚回）；shape="square" 圆角方形、type 换配色。直接滚动文档站页面即可体验。

<script setup lang="ts">
/** 返回顶部：backTop 追加内置按钮（滚动超过阈值出现，平滑滚回）；点击主按钮也会外抛 click */
import { ElMessage } from 'element-plus'
import { Promotion } from '@element-plus/icons-vue'
import { BizFloatButton } from 'vue3-ep-biz-lib'

/** 演示用高滚动区：把滚动监听说明清楚——返回顶部作用于 window 滚动 */
const filler = Array.from({ length: 12 }, (_, i) => `占位内容第 ${i + 1} 段：向下滚动页面，右下角出现返回顶部按钮`)
</script>

<template>
  <div style="max-height: 260px; overflow: auto; border: 1px dashed var(--el-border-color); border-radius: 8px; padding: 12px">
    <p v-for="text in filler" :key="text" style="font-size: 13px; color: var(--el-text-color-regular); line-height: 2">
      {{ text }}
    </p>
    <p style="font-size: 12px; color: var(--el-text-color-secondary)">实际使用时滚动的是页面本身——文档站页面即可直接体验。</p>
  </div>

  <BizFloatButton
    :icon="Promotion"
    tooltip="回到底部锚点"
    back-top
    :back-top-height="150"
    :offset="[24, 160]"
    type="danger"
    shape="square"
    @click="() => ElMessage.info('主按钮被点击')"
  />
</template>

显示代码

自定义菜单项

menu 插槽在菜单尾部渲染自定义行（如带计数角标的待办入口），与 menus 菜单项混排。

<script setup lang="ts">
/** 自定义菜单项：#menu 插槽在菜单尾部渲染带计数角标的业务行 */
import { ElMessage } from 'element-plus'
import { Bell } from '@element-plus/icons-vue'
import { BizFloatButton } from 'vue3-ep-biz-lib'
import type { BizFloatMenuItem } from 'vue3-ep-biz-lib'

const menus: BizFloatMenuItem[] = [
  { key: 'msg', label: '消息', icon: Bell },
]

const onMenuClick = (item: BizFloatMenuItem): void => {
  ElMessage.info(`点击了「${item.label}」`)
}

const onTodoClick = (): void => {
  ElMessage.info('点击了自定义菜单行「工单待办」')
}
</script>

<template>
  <BizFloatButton tooltip="工作台" :menus="menus" :offset="[88, 96]" @menu-click="onMenuClick">
    <template #menu>
      <button
        type="button"
        style="
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          height: 38px;
          padding: 0 14px;
          min-width: 120px;
          border: none;
          border-radius: 19px;
          background-color: var(--el-bg-color);
          color: var(--el-text-color-regular);
          font-size: 13px;
          cursor: pointer;
          box-shadow: var(--el-box-shadow-light);
        "
        @click="onTodoClick"
      >
        <span>工单待办</span>
        <span
          style="
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 9px;
            background-color: var(--el-color-danger);
            color: #fff;
            font-size: 12px;
          "
        >
          12
        </span>
      </button>
    </template>
  </BizFloatButton>
</template>

显示代码

四角停靠

position 四角同屏对比（rt / rb / lt / lb，配色区分）；停靠上侧角时菜单向下展开。

<script setup lang="ts">
/** 四角停靠：rt / rb / lt / lb 同屏对比，停靠上侧时菜单向下展开 */
import { Aim, ChatDotRound, Headset, Promotion } from '@element-plus/icons-vue'
import { BizFloatButton } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizFloatButton :icon="Aim" tooltip="右上角 rt" position="rt" :offset="[24, 140]" />
  <BizFloatButton :icon="Promotion" tooltip="右下角 rb（默认）" position="rb" :offset="[152, 96]" type="success" />
  <BizFloatButton :icon="ChatDotRound" tooltip="左上角 lt" position="lt" :offset="[24, 140]" type="warning" />
  <BizFloatButton :icon="Headset" tooltip="左下角 lb" position="lb" :offset="[88, 96]" type="danger" />
</template>

显示代码

编程式控制

openMenu / closeMenu / scrollToTop 经组件 ref 调用——适合从工具栏或快捷键远程控制悬浮按钮。

<script setup lang="ts">
/** 编程式控制：openMenu / closeMenu 经组件 ref 调用；click 事件承接主按钮动作 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { Histogram } from '@element-plus/icons-vue'
import { BizFloatButton } from 'vue3-ep-biz-lib'
import type { BizFloatMenuItem, BizFloatButtonInstance } from 'vue3-ep-biz-lib'

const fab = ref<BizFloatButtonInstance | null>(null)

const menus: BizFloatMenuItem[] = [
  { key: 'week', label: '周报' },
  { key: 'month', label: '月报' },
  { key: 'quarter', label: '季报' },
]

const onMenuClick = (item: BizFloatMenuItem): void => {
  ElMessage.success(`生成「${item.label}」`)
}
</script>

<template>
  <div style="display: flex; gap: 8px">
    <ElButton size="small" @click="fab?.openMenu()">远程展开菜单</ElButton>
    <ElButton size="small" @click="fab?.closeMenu()">远程收起</ElButton>
    <ElButton size="small" @click="fab?.scrollToTop()">回到顶部</ElButton>
  </div>

  <BizFloatButton
    ref="fab"
    :icon="Histogram"
    tooltip="报表"
    :menus="menus"
    :offset="[88, 160]"
    @menu-click="onMenuClick"
    @click="() => ElMessage.info('主按钮点击（可做默认动作）')"
  />
</template>

显示代码

拖动换位与停靠角

draggable 开启拖动，松手后吸附最近的左右边缘（位置保留至页面刷新）；position 切换四角停靠，上停靠角时菜单向下展开。

<script setup lang="ts">
/** 拖动换位与停靠角：draggable 开启后可拖到任意位置，松手吸附最近左右边缘 */
import { ChatDotRound } from '@element-plus/icons-vue'
import { BizFloatButton } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizFloatButton
    :icon="ChatDotRound"
    tooltip="按住我可拖动"
    draggable
    position="lb"
    :offset="[24, 96]"    type="success"
  />
</template>

显示代码

Props

属性名	类型	默认值	说明
icon	Component	More 图标	主按钮图标组件
tooltip	string	—	主按钮悬浮提示
menus	BizFloatMenuItem[]	—	展开菜单（配置后点击主按钮弹出，向停靠角内侧展开）
position	'rt' | 'rb' | 'lt' | 'lb'	'rb'	停靠角（右上 / 右下 / 左上 / 左下）
offset	[number, number]	[24, 24]	距停靠角偏移 [水平, 垂直]（px）
draggable	boolean	false	是否可拖动（拖动后吸附最近左右边缘）
back-top	boolean	false	追加内置「返回顶部」按钮（作用于 window 滚动）
back-top-height	number	200	返回顶部按钮出现阈值（px）
type	'primary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	主按钮配色（EP 语义色）
shape	'circle' | 'square'	'circle'	形状
teleport	string	'body'	挂载目标选择器

BizFloatMenuItem：

属性名	类型	必填	说明
key	string | number	是	唯一标识（menu-click 事件回传）
label	string	否	菜单文案（同时作为默认悬浮提示）
icon	Component	否	图标组件（@element-plus/icons-vue）
tooltip	string	否	悬浮提示（缺省用 label）
disabled	boolean	否	是否禁用

Events

事件名	参数	说明
click	(event: MouseEvent)	主按钮点击（配置了 menus 时同时切换菜单展开）
menu-click	(item: BizFloatMenuItem)	菜单项点击（disabled 项不触发）

Slots

插槽名	说明
menu	追加在菜单尾部的自定义菜单项

Expose

属性/方法	说明
openMenu / closeMenu	展开 / 收起菜单
scrollToTop	平滑滚动回顶部（内置按钮同款动作）
menuVisible	菜单展开状态（只读快照用途）