Menu/Contextmenu Component For Vue2

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