@niyaoqunaer/vue2-floating-menu

Vue 2 右下角悬浮菜单组件，适用于大屏/门户场景。默认仅显示主按钮，鼠标移入主按钮后展开菜单项，移出后自动收起。

特性

• 鼠标悬停主按钮展开，移出自动收起
• 内置 7 项默认菜单（指挥调度、AI 助理等），支持自定义
• 主按钮支持男/女形象切换
• 菜单项支持三种布局：row / stackLow / stackHigh
• 设计稿 px 自动转 rem（基准 1920 宽、100 字号）
• 展开后支持空闲自动收起
• TypeScript 类型支持

安装

npm install @niyaoqunaer/vue2-floating-menu
# 或
pnpm add @niyaoqunaer/vue2-floating-menu

依赖： vue >= 2.6（推荐 2.7）

可选依赖： vue-router@3（用于内置路由跳转解析）

快速开始

全局注册

import Vue from 'vue'
import VueFloatingMenu from '@niyaoqunaer/vue2-floating-menu'
import '@niyaoqunaer/vue2-floating-menu/style.css'

Vue.use(VueFloatingMenu)

new Vue({
  render: (h) => h(App),
}).$mount('#app')

<template>
  <FloatingMenu />
</template>

按需引入

<template>
  <FloatingMenu
    :items="items"
    gender="woman"
    @item-click="onItemClick"
  />
</template>

<script>
import {
  FloatingMenu,
  defaultFloatingMenuItems,
} from '@niyaoqunaer/vue2-floating-menu'
import '@niyaoqunaer/vue2-floating-menu/style.css'

export default {
  components: { FloatingMenu },
  data() {
    return {
      items: defaultFloatingMenuItems.map((item) => ({ ...item })),
    }
  },
  methods: {
    onItemClick(item) {
      console.log(item)
    },
  },
}
</script>

样式说明： 使用 npm 发布包时必须引入 style.css。

FloatingMenu Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | items | FloatingMenuItem[] | defaultFloatingMenuItems | 菜单项列表 | | mainIcon | string | '' | 主按钮自定义图标 URL，优先级高于 gender | | gender | 'man' \| 'woman' | 'man' | 主按钮内置形象（男/女） | | right | number | 0 | 距右侧距离（设计稿 px，内部转 rem） | | bottom | number | 0 | 距底部距离（设计稿 px，内部转 rem） | | defaultExpanded | boolean | false | 初始是否展开 | | autoCollapseIdleMs | number | 60000 | 展开后无操作自动收起时长（ms），0 表示不自动收起 |

Events

| 事件 | 参数 | 说明 | | --- | --- | --- | | item-click | FloatingMenuItem | 点击菜单项 | | expand-change | boolean | 展开 / 收起状态变化 |

实例方法（ref）

<template>
  <FloatingMenu ref="menuRef" />
</template>

<script>
export default {
  methods: {
    openMenu() {
      this.$refs.menuRef.toggleExpanded()
    },
  },
}
</script>

| 名称 | 说明 | | --- | --- | | expanded | 当前是否展开 | | toggleExpanded() | 切换展开 / 收起 |

FloatingMenuItem

interface FloatingMenuItem {
  id: string
  label: string
  icon?: string
  layout: 'row' | 'stackLow' | 'stackHigh'
  order?: number
  disabled?: boolean
}

导出 API

import VueFloatingMenu, {
  FloatingMenu,
  defaultFloatingMenuItems,
  toRem,
} from '@niyaoqunaer/vue2-floating-menu'

与 Vue 3 版差异

• 使用 Options API（兼容 Vue 2.6+）
• 样式通过 CSS 变量 --label-bg 绑定背景图（Vue 2 不支持 <style> 中的 v-bind）
• 路由跳转依赖 this.$router（需项目安装 vue-router@3）

本地开发与发布

# 在仓库根目录
pnpm build:floating-v2

# 或在包目录
cd packages/vue2-floating-menu
pnpm build

环境要求： Node.js >= 18

License

MIT