@niyaoqunaer/vue-floating-menu

Vue 3 悬浮菜单组件，支持鼠标悬停展开、菜单项 弹层。

安装

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

快速开始

全局注册

import { createApp } from 'vue'
import VueFloatingMenu from '@niyaoqunaer/vue-floating-menu'
// 使用 npm 包构建产物时需引入样式；monorepo 源码联调时组件样式会自动注入，无需单独引入
import '@niyaoqunaer/vue-floating-menu/style.css'

const app = createApp(App)
app.use(VueFloatingMenu)
app.mount('#app')

按需引入

<script setup lang="ts">
import {
  FloatingMenu,
  defaultFloatingMenuItems,
  type FloatingMenuItem,
} from '@niyaoqunaer/vue-floating-menu'
import '@niyaoqunaer/vue-floating-menu/style.css'

const items: FloatingMenuItem[] = defaultFloatingMenuItems.map((item) => ({
  ...item,
  iframeUrl: item.id === 'ypfx' ? 'https://example.com' : '',
}))
</script>

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

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | items | FloatingMenuItem[] | 内置默认菜单 | 菜单项配置 | | mainIcon | string | 内置图标 | 主按钮图标 URL | | right | number | 0 | 距右侧距离（设计稿 px） | | bottom | number | 0 | 距底部距离（设计稿 px） | | defaultExpanded | boolean | false | 默认是否展开 | | autoCollapseIdleMs | number | 60000 | 展开后无操作自动收起时长，0 表示不自动收起 |

Events

| 事件 | 参数 | 说明 | | --- | --- | --- | | item-click | FloatingMenuItem | 点击菜单项 | | iframe-open | { url, title, item } | 打开 iframe 弹层 | | iframe-close | — | 关闭 iframe 弹层 | | expand-change | boolean | 展开/收起状态变化 |

本地开发

cd packages/vue-floating-menu
pnpm install
pnpm build

License

MIT