ByFloatingMenu 悬浮菜单组件

一个功能丰富的悬浮菜单组件，支持拖拽、隐藏、菜单展开等功能。

功能特性

• ✅ 圆形按钮设计，默认显示在右下角
• ✅ 可配置主按钮图标和文字
• ✅ 菜单纵向展开，支持图标和文字显示
• ✅ 鼠标悬停显示菜单标题提示
• ✅ 右上角隐藏按钮，可隐藏到浏览器右侧
• ✅ 支持垂直拖拽（不能超出屏幕）
• ✅ 点击菜单项触发事件
• ✅ 支持菜单项禁用状态

基础用法

<template>
  <div>
    <ByFloatingMenu :menu-items="menuItems" @menu-click="handleMenuClick" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { icon: 'icon-home', title: '首页', text: '首页' },
        { icon: 'icon-user', title: '用户', text: '用户' },
        { icon: 'icon-settings', title: '设置', text: '设置' }
      ]
    }
  },
  methods: {
    handleMenuClick({ item, index }) {
      console.log('点击了菜单项:', item, '索引:', index)
    }
  }
}
</script>

自定义配置

<template>
  <ByFloatingMenu
    main-button-icon="icon-custom"
    main-button-text="菜单"
    size="medium"
    :menu-items="customMenuItems"
    :position="{ right: '20px', bottom: '200px' }"
    @menu-click="handleMenuClick"
  />
</template>

<script>
export default {
  data() {
    return {
      customMenuItems: [
        {
          icon: 'icon-star',
          title: '收藏',
          text: '收藏',
          disabled: false
        },
        {
          icon: 'icon-share',
          title: '分享',
          text: '分享',
          disabled: false
        },
        {
          icon: 'icon-download',
          title: '下载',
          text: '下载',
          disabled: true
        }
      ]
    }
  }
}
</script>

Props

参数	说明	类型	可选值	默认值
mainButtonIcon	主按钮图标类名	String	—	'icon-menu'
mainButtonText	主按钮文字（当没有图标时显示）	String	—	''
menuItems	菜单项配置数组	Array	—	见下方说明
position	初始位置	Object	—	{ right: '20px', bottom: '20px' }
size	按钮大小	String	mini/small/medium	small

menuItems 配置

参数	说明	类型	可选值	默认值
icon	菜单项图标类名	String	—	—
text	菜单项文字（当没有图标时显示）	String	—	—
title	鼠标悬停提示文字	String	—	—
disabled	是否禁用	Boolean	—	false

Events

事件名	说明	回调参数
menu-click	点击菜单项时触发	{ item, index }

内置图标

组件内置了以下图标类名：

• icon-menu - 菜单图标 (☰)
• icon-home - 首页图标 (🏠)
• icon-user - 用户图标 (👤)
• icon-settings - 设置图标 (⚙️)
• icon-star - 星标图标 (⭐)
• icon-share - 分享图标 (📤)
• icon-download - 下载图标 (⬇️)
• icon-help - 帮助图标 (❓)

大小说明

大小值	尺寸	说明
mini	40px	迷你尺寸
small	50px	小尺寸（默认）
medium	60px	中等尺寸

使用说明

1. 拖拽功能：组件支持垂直拖拽，鼠标按住主按钮即可拖拽，拖拽时不能超出屏幕边界
2. 隐藏功能：点击右上角的隐藏按钮可以将菜单完全隐藏，同时在浏览器右侧边缘会出现一个蓝色的显示按钮，点击该按钮可以重新显示菜单
3. 菜单展开：点击主按钮可以展开/收起菜单
4. 提示功能：鼠标悬停在菜单项上会显示对应的标题提示
5. 事件处理：点击菜单项会触发 menu-click 事件，可以通过事件参数获取菜单项信息和索引

样式定制

组件使用 SCSS 编写，支持通过 CSS 变量进行主题定制：

.by-floating-menu {
  .floating-main-btn {
    background: #your-color; // 主按钮背景色
    color: #your-color; // 主按钮文字颜色
  }

  .menu-item {
    background: #your-color; // 菜单项背景色
    color: #your-color; // 菜单项文字颜色
  }
}