介绍 vue-float-menu,Vue 3 的智能浮动菜单。

Vue小助理

1297人浏览 · 2022-08-14 22:23:26

Vue小助理 · 2022-08-14 22:23:26 发布

vue-float-menu

最近我对 Vue 3 的发布非常兴奋,并且正在考虑为 Vue 3 编写一个新的组件库。

我的一些项目非常需要一个可拖动的浮动菜单。尽管 github 上有一些针对 Vue 2 的出色项目,但我找不到一个可以满足我的一些 UX 和功能需求的项目。

vue-float-menu试图创建一个可以在屏幕上轻松拖动并支持子菜单的灵活菜单。

请随时发送您对项目的任何反馈或您在尝试时遇到的任何问题。

[ app-home ](https://res.cloudinary.com/practicaldev/image/fetch/s--cm_i8Xef--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/zgye9qzr8v47w9fbkh6z.png)

⚡在 Stackblitz 上编辑

⭐为这个项目加注星标

prabhuignoto/vue-float-menu

可自定义的 Vue 浮动菜单。

特点

✅ 可拖动的菜单手柄 - 拖动并轻松地将菜单放置在屏幕上的任何位置。

✅ 智能菜单 - 检测屏幕的顶部和底部边缘并自动翻转菜单。

✅ 智能放置 - 菜单头自动调整并始终保持在视口内。

✅ 嵌套菜单 - 支持任何级别的嵌套菜单。

✅ Composition API - 使用来自 Vue 3 的最新 Composition API 构建。

⚙ 安装

yarn install vue-float-menu

进入全屏模式退出全屏模式

🚀 开始

浮动菜单有一些很好的默认值。有关所有可用选项的详细信息,请查看道具列表。

以下代码段将菜单的默认位置设置为top left,将默认菜单方向设置为bottom。

  <float-menu
    position="top left"
    :dimension="50"
    :menu="menuData"
    menu-direction="bottom"
  >
    <BoxIcon />
  </float-menu>

进入全屏模式退出全屏模式

📺 演示

[](https://res.cloudinary.com/practicaldev/image/fetch/s--dp0lTvlI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/i/g9ezs62zuaba1m32rzgy.gif)

道具

支柱

类型

描述

方面

数字

菜单头width x height的尺寸(以像素为单位)。

位置

细绳

菜单头的初始位置。可以是值top left、top right、bottom left、bottom right中的任何一个

固定的

布尔值

禁用拖动,菜单将被修复。使用position道具固定菜单位置

菜单方向

细绳

设置菜单的方向。可以是top或bottom。

菜单维度

目的

设置菜单的width和minimum高度。

菜单数据

目的

用于生成嵌套菜单的数组数据。

选中

功能

选择时调用的钩子。

翻转边缘

布尔值

当没有空间显示嵌套菜单时,自动翻转菜单内容。

尺寸

dimensionprop 可用于设置菜单头的宽度和高度。该道具采用单个数值来设置菜单头的高度和宽度。

  <float-menu :dimension=50>
    <BoxIcon />
  </float-menu>

进入全屏模式退出全屏模式

位置

position属性可用于设置 Menu Head 的初始位置。该道具可以接受以下任何一个值。

top left(默认)
top right
bottom left
bottom right

  <float-menu :dimension=50 position="bottom right">
    <BoxIcon />
  </float-menu>

进入全屏模式退出全屏模式

固定位置

要禁用拖动并静态固定位置,请将fixed设置为true。默认情况下禁用此属性。将此道具与position道具一起使用以设置所需的位置。

  <float-menu :dimension=50 position="bottom right" fixed>
    <BoxIcon />
  </float-menu>

进入全屏模式退出全屏模式

菜单方向

设置菜单的默认方向。可以设置为top或bottom。

  <float-menu :dimension=50 position="bottom right" menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

进入全屏模式退出全屏模式

菜单头尺寸

prop 设置菜单的height和width。

  <float-menu
    :dimension=50
    :menu-dimension="{height: 400, width: 300}"
    position="bottom right"
    menu-orientation="bottom"
    <BoxIcon />
  </float-menu>

进入全屏模式退出全屏模式

填充菜单

使用menu-data道具创建您喜欢的简单或嵌套菜单。menu-data采用MenuItem类型的数组

MenuItem 属性列表

财产

描述

姓名

菜单项的显示名称。

每个菜单项的唯一 ID。这是由组件自动生成的。

选择

标记以突出显示子菜单选择。

显示子菜单

标志显示/隐藏子菜单。

子菜单

子菜单的数据

在这里,我们创建了一个简单的菜单结构,其中包含 3 个没有子菜单的菜单项。

const menuData = [
  { name: "New" },
  {
    name: "Edit",
    subMenu: {
      name: "edit-items",
      items: [{ name: "Copy" }, { name: "Paste" }],
    },
  },
  {
    name: "Open Recent",
    subMenu: {
      name: "recent-items",
      items: [{ name: "Document 1" }, { name: "Document 2" }],
    },
  },
]

进入全屏模式退出全屏模式

  <float-menu
    :dimension=50
    :menu-dimension="{height: 400, width: 300}"
    :menu-data="menuData"
    position="bottom right"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

进入全屏模式退出全屏模式

[ example1 ](https://res.cloudinary.com/practicaldev/image/fetch/s--J_MPDrdr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/i/q71x745jb4qle38832nl.png)

开启选择

菜单项选择事件的挂钩。

  <float-menu
    :dimension=50
    position="bottom right"
    :menu-dimension="{height: 400, width: 300}"
    :menu-data="{items: [{name: 'File'}, {name: 'Open'}]}"
    on-select="handleSelection"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

进入全屏模式退出全屏模式

边缘自动翻转

设置此道具flips屏幕右边缘的菜单内容。这对您有许多级别的嵌套菜单很有用。

  <float-menu
    :dimension=50
    position="bottom right"
    flip-on-edges
    on-select="handleSelection"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

进入全屏模式退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--7pvi6dcz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/i/v38ne68ixl7ir6pq3ee0.png)

自定义图标

要自定义菜单图标,只需在float-menu个标签之间传递任何内容。这里我们渲染一个自定义图标。

  <float-menu
    :dimension=50
    :menu-data="menuData"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

进入全屏模式退出全屏模式

在这里,我们在菜单句柄中呈现自定义文本

  <float-menu
    :dimension=50
    :menu-data="menuData"
    menu-orientation="bottom">
    Click
  </float-menu>

进入全屏模式退出全屏模式

[ example2 ](https://res.cloudinary.com/practicaldev/image/fetch/s--ReIq5PLn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/i/y3no4g46f831l0jvfuvo.png)