Skip to content
Menu/Contextmenu Component for vue2
TypeScript Vue HTML JavaScript
Branch: master
Clone or download
Latest commit 79eb43a Jun 29, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs improve documents Sep 8, 2017
example function keys Apr 1, 2019
src #18 Apr 13, 2019
standalone iOS support Feb 7, 2019
.gitignore compatible with nested contextmenu Aug 28, 2018
.npmignore fix broken npmignore Sep 12, 2017
LICENSE initial commit Sep 8, 2017
README.md Update README.md Jun 29, 2019
package-lock.json 2.10.0 Apr 13, 2019
package.json 2.10.0 Apr 13, 2019
postcss.config.js initial commit Sep 8, 2017
tsconfig.json cleanup Oct 20, 2017
webpack.config.js update dependencies Sep 20, 2018

README.md

vue-menu

Introduction

Recent web technologies focus on mobile environments. UIs premised on mouse operation such as window, context-menu, nested-menu and so on are no longer mainstream. However hierarchical structure -- context-menu and nested-menu -- is still effective. This package is an implementation of {nested,context}-menu for PC environments as a Vue Component.

Working Demo

Features

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

Screenshot

Usage

Install

npm install --save @hscmap/vue-menu

Setup

ES6 / TypeScript

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

Vue.use(VueMenu)

CommonJS

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

Example

<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>

Other examples are available here.

See also vue-window. This is a window UI component for vue2 with the same color themes.

Caveats

Contributing

Any comments, suggestions or PRs are welcome 😀

You can’t perform that action at this time.