A simple vue context menu component
A simple yet flexible context menu for Vue. It is styled for the standard ul tag, but any menu template can be used.
vue-context
vue-context
provides a simple yet flexible context menu for Vue. It is styled for the standard <ul>
tag, but any menu template can be used.
The menu is lightweight with its only dependency being vue-clickaway
. The menu has some basic styles applied to it but they can be easily
overridden by your own styles.
The menu disappears when you expect by utilizing vue-clickaway
and it also optionally disappears when clicked on.
Note
The API has changed since the last major release. Check v2 documentation if you use the old version.
Getting Started
The following instructions will help you get the vue-context menu up and running on your project.
Installation
Using npm:
npm i vue-context
Basic Usage
Import the component and use it in your app.
import Vue from 'vue';
import { VueContext } from 'vue-context';
new Vue({
components: {
VueContext
},
methods: {
onClick (text) {
alert(`You clicked ${text}!`);
}
}
}).$mount('#app');
Next add an element to the page that will trigger the context menu to appear, and also add the context menu to the page.
<div id="app">
<div>
<p @contextmenu.prevent="$refs.menu.open">
Right click on me
</p>
</div>
<vue-context ref="menu">
<ul>
<li @click="onClick($event.target.innerText)">Option 1</li>
<li @click="onClick($event.target.innerText)">Option 2</li>
</ul>
</vue-context>
</div>
Documentation/Demo
For full documentation and demos, go here: https://vue-context.randallwilk.com/docs
License
vue-context
uses the MIT License (MIT). Please see the license file for more information.
Github Repository
Tags: #VueJs #Context Menu #Menu