Flexible Customizable Context Menu – vue-context

Install & Download:

# NPM
$ npm install vue-context --save

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.