A Simple Vue Context Menu Component Javascript Library

vue context provides a simple and flexible context menu for Vuejs. It is designed for the standard <ul> tag, but any menu template can be used. The menu is lightweight with only one dependency vue-click away.

The list has some basic patterns applied to it, but these can easily be overridden by your own. The menu disappears when you expect it using vue-clickaway and optionally disappears when you click it.

How to make use of it:

Installation:

npm i vue-context

1. Import the component and use it in your application.

import Vue from 'vue';
import VueContext from 'vue-context';

new Vue({
    components: {
        VueContext
    },
    
    methods: {
        onClick (text) {
            alert(`You clicked ${text}!`);
        }
    }
}).$mount('#app');

2. Next, add an element to the page that will bring up the context menu, 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>

Slots

SlotDescription
defaultThe default slot also serves as a scoped slot that receives any data passed to the menu

Props

PropTypeDefaultDescription
closeOnClickBooleantrueIf set to false, a context menu will not automatically close when clicked on
closeOnScrollBooleantrueIf set to true, a context menu will automatically close on the window scroll
lazyBooleanfalseIf set to true, a context menu will be rendered with a v-if instead of v-show
itemSelectorArray, String['.v-context-item', '.v-context > li > a']The selector of the menu items the menu will use to look to set accessibility attributes and for keyboard navigation.
roleStringmenuUsed for the role attribute on the context menu
subMenuOffsetNumber10Specify the offset in pixels of the submenus
tagStringulUsed as the root element of the context menu
heightOffsetNumber25Specify the distance from the menu to the top/bottom of the screen
widthOffsetNumber25Specify the distance from the menu to the left of the screen
useScrollHeightBooleanfalseUse the menu’s scroll height instead of offset height to calculate positioning
useScrollWidthBooleanfalseUse the menu’s scroll width instead of offset width to calculate positioning

Events

EventArgumentsDescription
closenoneEmits when the context menu is closed
openeventdatatopleftEmits when the menu is opened. the event, context menu data, and top and left positions are all sent through as parameters

Flexible Customizable Context Menu, vue-context Plugin/Github, javascript context menu example, contextmenu event javascript


See Demo And Download

Official Website(rawilk): Click Here

This superior jQuery/javascript plugin is developed by rawilk. For extra advanced usage, please go to the official website.

Share