Description:
vue-context is a flexible, customizable, semantic context menu component for Vue.js.
More Features:
- Works with HTML unordered list (ul).
- Custom click event.
- Auto close on scroll or click.
How to use it:
1. Import the vue-context component after installation.
import Vue from 'vue'; import VueContext from 'vue-context'; // Or import import { VueContext } from 'vue-context';
2. Import the needed stylesheet.
@import '~vue-context/src/sass/vue-context'; // Or @import '~vue-context/dist/css/vue-context.css';
3. Attach a basic context menu to your element.
<div id="app"> <div> <p @contextmenu.prevent="$refs.menu.open"> Right click on me </p> </div> <vue-context ref="menu"> <li> <a @click.prevent="onClick($event.target.innerText)">Option 1</a> </li> <li> <a @click.prevent="onClick($event.target.innerText)">Option 2</a> </li> </vue-context> </div>
new Vue({ components: { VueContext }, methods: { onClick (text) { alert(`You clicked ${text}!`); } } }).$mount('#app');
4. All possible props to customize the context menu.
closeOnClick: { type: Boolean, default: true }, closeOnScroll: { type: Boolean, default: true }, lazy: { type: Boolean, default: false // lazy load }, itemSelector: { type: [String, Array], default: () => ['.v-context-item', '.v-context > li > a'] }, role: { type: String, default: 'menu' }, subMenuOffset: { type: Number, default: 10 }, tag: { type: String, default: 'ul' // any HTML tag }
Preview:
Changelog:
v6.0.0 (08/04/2020)
- Breaking Change: Remove named export from entry point
- Change submenu chevron character code in style sheet
v5.2.0 (08/02/2020)
- Added: Prop useScrollHeight to use element scroll height instead of offset height.
- Added: Prop useScrollWidth to use element scroll width instead of offset width.
- Added: Props heightOffset and widthOffset to specify distance from edge of screen.
Download Details:
Author: rawilk
Live Demo: https://vue-context.com/docs/basic-usage-demo
Download Link: https://github.com/rawilk/vue-context/archive/master.zip
Official Website: https://github.com/rawilk/vue-context
Install & Download:
# NPM
$ npm install vue-context --save