Flexible Customizable Context Menu – vue-context

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:

Flexible Customizable Context Menu - vue-context

Download Details:

Author: rawilk

Live Demo: https://vue-context.com/docs/5.0/advanced-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

You Might Be Interested In:

Add Comment