A simple context menu component designed for Vue. It works fine with right and left clicks. Nothing fancy, just works and is easy to use.
Just a simple menu that appears when a click occurs – it closes after use automatically by clicking an option or out of the menu. Multiple lists are supported – just make sure you use a unique string as the value of your elementId property.
A great feature that comes baked in is the menu mode after a click – it sits slightly below your click location – so that any style hovering over the clicked element is nicely removed. I designed it following the right-click menu in macOS.
How to make use of it:
Install and download:
# Yarn $ yarn add vue-simple-context-menu # NPM $ npm install vue-simple-context-menu --save
Or you can include it through the browser at the bottom of your page with CSS:
<script src="//unpkg.com/vue-simple-context-menu/dist/vue-simple-context-menu.min.js"></script> <link rel="stylesheet" type="text/css" href="//unpkg.com/vue-simple-context-menu/dist/vue-simple-context-menu.css" />
|String||Unique String that acts as the id of your menu.||Yes|
|Array||An array of menu options to show. The component will use the ||Yes|
|Array||Label for the option.||Yes|
|String||A custom class will be applied to the option.||No|
|String||Only one possible value at the moment – ||No|
|String||Unique String that allows you to show the menu on command.||Yes|
|event (MouseEvent), item (Object)||Used to show the menu. Make sure to pass a MouseEvent and an Object.|
|Object||When a menu item is clicked the component will emit an event with a value containing the clicked item and the menu option that was clicked. Register for this event to capture the selection result.|
|Emitted when the menu is closed|
Simple Context Menu Component For Vue.js, vue simple context menu Plugin/Github
See Demo And Download
Official Website(johndatserakis): Click Here