Package Exports

@hscmap/vue-menu

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hscmap/vue-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Introduction

working DEMO

Features

Menu component for vue2
Deeply nested menu supported
Props "checked" & "disabled"
Keybinds
Y-scrollable if necessary
Contextmenu
Builtin 2 themes (black & white)
Customizable color
Menuitem can contain any HTML not only text
Tested on Safari10, Chrom60, Firefox55, IE11, Edge38 for PCs
Not works on mobile devices 😞

Screenshot

Usage

Install

npm install --save @hscmap/vue-menu

Setup

ES6 / TypeScript

import Vue from 'vue'
import * as hscmapMenu from '@hscmap/vue-menu'

Vue.use(hscmapMenu)

CommonJS

var Vue = require('vue')
Vue.use(require('@hscmap/vue-menu'))

Example

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

Other examples are available here.