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.
The following instructions will help you get the vue-context menu up and running on your project.
Using npm:
npm i vue-context
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">
<li>
<a href="#" @click.prevent="onClick($event.target.innerText)">Option 1</a>
</li>
<li>
<a href="#" @click.prevent="onClick($event.target.innerText)">Option 2</a>
</li>
</vue-context>
</div>
Notice: As of version 4.1.0, the menu styles are not automatically included by default anymore. You will need to manually import them now in your own stylesheets.
@import '~vue-context/dist/css/vue-context.css';
// Or
@import '~vue-context/src/sass/vue-context';
For full documentation and demos, go here: https://vue-context.com/docs
This project exists thanks to all the people who contribute. [Contribute].
vue-context
uses the MIT License (MIT). Please see the license file for more information.