Vue 3的多级Dock菜单组件 - vue-dock-menu

Vue 3的多级Dock菜单组件 - vue-dock-menu
插件名称 vue-dock-menu
版本号 v1.0.3
发布时间 2020年11月29日
插件作者 prabhuignoto

一个可定制的多层停靠菜单(下拉菜单)组件,就像在Windows等流行的OS上看到的那样。

与最新的Vue.js 3框架兼容。

变更日志:

v1.0.3(03/24/2021)

  • 修复了即使失去焦点后仍突出显示菜单栏的错误

v1.0.2(01/16/2021)

  • 修复了同时打开多个子菜单的问题

v1.0.2(01/13/2021)

  • 解决了深源问题

v1.0.1(2020年12月18日)

  • 修复了拖动将无法正常运行的问题。
  • 当停靠在左侧或右侧时,用于控制侧边栏宽度的新道具。

v1.0.0(12/14/2020)

  • 触控支持
  • 杂项错误修复

v0.3.1(12/12/2020)

  • 支持图标

v0.2.2(2020年1月1日)

  • 支持禁用菜单项。

如何使用它:

1.导入停靠菜单组件。

import { DockMenu } from "vue-dock-menu";
import "vue-dock-menu/dist/vue-dock-menu.css";

2.将DockMenu组件添加到应用模板,并使用themeprop覆盖默认样式,如下所示:

<DockMenu
  :items="items"
  :on-selected="handleSelected"
  :theme="{
    primary: '#b2b2b2',
    secondary: '#e5e5e5',
    tertiary: '#008ecc',
    textColor: '#000',
    textHoverColor: '#fff',
  }"
/>

3.注册组件,然后将自己的菜单项插入DockMenu。

export default {
  name: "App",
  components: {
    DockMenu,
  },
  setup() {
    const handleSelected = () => {};
    return {
      handleSelected,
    };
  },
  data() {
    return {
      count: 0,
      items: [
        {
          name: "file",
          menu: [
            { name: "New File" },
            { name: "New Window" },
            { name: "Open File" },
            { isDivider: true },
            {
              name: "Preferences",
              menu: [
                { name: "Settings" },
                {
                  name: "Themes",
                  menu: [
                    {
                      name: "White",
                      menu: [{ name: "white 1" }, { name: "white 2" }],
                    },
                    {
                      name: "Black",
                    },
                  ],
                },
              ],
            },
            { name: "Open Workspace" },
            { isDivider: true },
            { name: "Save" },
            { name: "Save As..." },
            { isDivider: true },
            { name: "Close" },
            { name: "Exit" },
          ],
        },
        {
          name: "edit",
          menu: [
            { name: "Undo" },
            { name: "Redo" },
            { isDivider: true },
            { name: "Cut" },
            { name: "Copy" },
            { name: "Paste" },
            { isDivider: true },
            { name: "Find" },
            { name: "Replace" },
          ],
        },
        {
          name: "View",
          menu: [
            { name: "Explorer" },
            { name: "Search" },
            { name: "Run" },
            { isDivider: true },
            {
              name: "Apperance",
              menu: [{ name: "Full Screen" }, { name: "Zen Mode" }],
            },
          ],
        },
        {
          name: "Help",
          menu: [{ name: "About" }, { name: "Check for Updates" }],
        },
      ],
    };
  },
};

4.所有默认组件 props 。

items: {
  type: Array as PropType<MenuItemModel[]>,
  default: [] as MenuItemModel[],
  required: true,
},
dock: {
  required: false,
  default: MenuBarDockPosition.TOP,
  type: String,
},
parent: {
  required: false,
  default: "",
  type: String,
},
theme: {
  required: true,
  type: Object as PropType<MenuTheme>,
},
isMobile: {
  type: Boolean,
  default: false,
},
nested: {
  type: Boolean,
  default: false,
},
onSelected: {
  required: true,
  type: Function as PropType<
    ({ name, path }: { name: string; path: string }) => void
  >,
},
initialHighlightIndex: {
  required: false,
  type: Number,
  default: -1,
},