A multi-functional dropdown menu / context menu component for Vue.js 2+ applications.
Features:
- Menu component for vue2
- Deeply nested menu supported
- Props “checked” & “disabled”
- Keyboard interactions
- Y-scrollable if necessary
- Contextmenu
- 3 built-in themes (black, white, and metal)
- Customizable color
- Menu items can contain any HTML not only text
- Tested on Safari10, Chrom60, Firefox55, IE11, Edge38 for PCs
How to use it:
1. Import and register the menu componnet.
import Vue from 'vue' import * as VueMenu from '@hscmap/vue-menu'
Vue.use(VueMenu)
2. Add the component to the template.
<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>
Preview:
Changelog:
03/04/2022
- v2.10.1
Download Details:
Author: michitaro
Live Demo: https://michitaro.github.io/vue-menu/
Download Link: https://github.com/michitaro/vue-menu/archive/master.zip
Official Website: https://github.com/michitaro/vue-menu
Install & Download:
npm install --save @hscmap/vue-menu