https://github.com/michitaro/vue-menu

Menu/Contextmenu Component for vue2
https://github.com/michitaro/vue-menu

component contextmenu javascript menu typescript vue

Last synced: about 2 months ago
JSON representation

Menu/Contextmenu Component for vue2

• Host: GitHub
• URL: https://github.com/michitaro/vue-menu
• Owner: michitaro
• License: mit
• Created: 2017-09-08T05:02:00.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-10-02T07:00:38.000Z (almost 2 years ago)
• Last Synced: 2024-07-18T19:12:49.927Z (2 months ago)
• Topics: component, contextmenu, javascript, menu, typescript, vue
• Language: TypeScript
• Homepage: https://michitaro.github.io/vue-menu/
• Size: 1.46 MB
• Stars: 262
• Watchers: 6
• Forks: 26
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-menu

😣 This library is not compatible with Vue3! 😣

## 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](https://michitaro.github.io/vue-menu)

### 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](./docs/screenshot.png)

# Usage

## Install

```sh

npm install --save @hscmap/vue-menu

```

## Setup

### ES6 / TypeScript

```typescript

import Vue from 'vue'

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

Vue.use(VueMenu)

```

### CommonJS

```javascript

var Vue = require('vue')

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

```

# Example

```html

    

        

            

                

                

                

                

                

                    

                    

                

            

            

                

                

                

                

                

            

        

    

```

Other examples are available [here](http://michitaro.github.io/vue-menu/).

See also [vue-window](https://github.com/michitaro/vue-window). This is a window UI component  for vue2 with the same color themes.

# Caveats

* ~~This component doesn't work on [electron-vue](https://github.com/SimulatedGREG/electron-vue).~~

  * See [here](https://github.com/michitaro/vue-menu/issues/5#issuecomment-450770617) to use with [electron-vue](https://github.com/SimulatedGREG/electron-vue).

# Contributing

Any comments, suggestions or PRs are welcome 😀

# React Port

React port is available [here](https://github.com/michitaro/react-menu).