Vue2的菜单/上下文菜单组件 - vue-menu

Vue2的菜单/上下文菜单组件 - vue-menu
插件名称 vue-menu
发布时间 2020年12月27日
插件作者 michitaro

适用于Vue.js 2+应用程序的多功能下拉菜单/上下文菜单组件。

特征:

  • vue2的菜单组件
  • 支持深度嵌套菜单
  • 道具“已检查”和“已禁用”
  • 键绑定
  • Y滚动(如果需要)
  • 上下文菜单
  • 内置2个主题(黑白)
  • 可定制的颜色
  • Menuitem不仅可以包含文本,还可以包含任何HTML
  • 在PC的Safari10,Chrom60,Firefox55,IE11,Edge38上进行了测试
  • 在移动设备上不起作用

安装和下载:

npm install --save @hscmap/vue-menu

<template>
    <hsc-menu-style-white>
        <hsc-menu-bar style="border-radius: 0 0 4pt 0;">
            <hsc-menu-bar-item label="File">
                <hsc-menu-item label="New" @click="window.alert('New')" />
                <hsc-menu-item label="Open" @click="window.alert('Open')" />
                <hsc-menu-separator/>
                <hsc-menu-item label="Save" @click="window.alert('Save')" :disabled="true" />
                <hsc-menu-item label="Export to">
                    <hsc-menu-item label="PDF" />
                    <hsc-menu-item label="HTML" />
                </hsc-menu-item>
            </hsc-menu-bar-item>
            <hsc-menu-bar-item label="Edit">
                <hsc-menu-item label="Undo" keybind="meta+z" @click="window.alert('Undo')" />
                <hsc-menu-separator/>
                <hsc-menu-item label="Cut" keybind="meta+x" @click="window.alert('Cut')" />
                <hsc-menu-item label="Copy" keybind="meta+c" @click="window.alert('Copy')" />
                <hsc-menu-item label="Paste" keybind="meta+v" @click="window.alert('Paste')" :disabled="true" />
            </hsc-menu-bar-item>
        </hsc-menu-bar>
    </hsc-menu-style-white>
</template>