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