Vue应用程序的浮动菜单组件 - vue-float-menu

Vue应用程序的浮动菜单组件 - vue-float-menu
插件名称 vue-float-menu
发布时间 2020年10月19日
插件作者 prabhuignoto

一个Vue.js组件,用于在Vue.js应用程序上创建可拖动,可自定义,多层,键盘可访问的浮动菜单。

下载安装:

# Yarn
$ yarn add vue-float-menu

# NPM
$ npm i vue-float-menu --save

变更日志:

v1.9.0(12/13/2020)

  • 支持图标

v1.8.2(12/05/2020)

  • 修复了键盘可访问性问题。(使用向右箭头的行为很奇怪)。

v1.8.0(2020年11月25日)

  • 限制屏幕边缘周围的拖动移动。
  • 支持在菜单项之间添加新的分隔线。

v1.7.6(2020年11月21日)

  • 删除了interactjs。拖放操作完全由库本身管理
  • 减少最终构建尺寸

v1.7.3(11/18/2020)

  • 为滑出模式添加菜单选择突出显示

v1.7.1(11/17/2020)

  • 引入两种新模式(滑出和手风琴)是默认模式。引入了手风琴来处理移动用例。
  • 现在,菜单手柄将恢复到屏幕边缘的原始位置。
  • 去除纳米粒子。

如何使用它:

1.导入组件及其样式表。

import { FloatMenu } from "vue-float-menu";
import "vue-float-menu/dist/vue-float-menu.css";

2.注册组件。

export default {
  components: {
    FloatMenu,
  }
  // ...
};

3.将浮动菜单添加到模板。

<float-menu
  :menu-data="items"
  :on-selected="handleSelection"
>
  Drag
</float-menu>

4.设置浮动菜单并定义嵌套菜单数据,如下所示:

export default {
  components: {
    FloatMenu,
  },
  setup() {
    const handleSelection = (selectedItem: string) => {
      console.log(selectedItem);
    };
    return {
      handleSelection,
    };
  },
  data() {
    return {
      items: [
        { name: "Home" },
        {
          name: "Category",
          subMenu: {
            name: "JavaScript",
            items: [
              { name: "React" }, 
              { name: "Vue" }
            ],
          },
        },
        {
          name: "Contact"
        },
        {
          name: "About",
        }
      ],
    };
  },
};