Simple Context Menu Component Library For Vue.js

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.

javascript context menu example, vaadin context menu, custom context menu, context menu jquery, context menu css

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

Props

proptypedescriptionrequired
elementIdStringUnique String that acts as the id of your menu.Yes
optionsArrayAn array of menu options to show. The component will use the name parameter as the label.Yes
options.nameArrayLabel for the option.Yes
options.classStringA custom class will be applied to the option.No
options.typeStringOnly one possible value at the moment –¬†divider. Pass this to set the object as a divider.No
refStringUnique String that allows you to show the menu on command.Yes

Methods

methodparametersdescription
showMenuevent (MouseEvent), item (Object)Used to show the menu. Make sure to pass a MouseEvent and an Object.

Events

eventvaluedescription
option-clickedObjectWhen 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.
menu-closed 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

This superior jQuery/javascript plugin is developed by johndatserakis. For extra Advanced Usage, please go to the official website.

Share