vue-contextmenu-easy v1.0.2

vue-contextmenu-easy

A simple and easy to use vue contextmenu component

Install

npm install vue-contextmenu-easy --save

Usage

Import

import VueContextMenu from 'vue-contextmenu-easy'
Vue.use(VueContextMenu)

or

<script src="./dist/vue-contextmenu-easy.js"></script>

Usage

Binding an event on a container tag that needs to trigger an environment menu

<div class="click-area" @contextmenu="$vuecontextmenu()"></div>

<div class="click-area" @contextmenu="$vuecontextmenu('tag1')"></div>

Import components anywhere

<vue-context-menu :menulists="menulists" @contentmenu-click="contentmenuClick"></vue-context-menu>

<vue-context-menu :menulists="menulists1" @contentmenu-click="contentmenuClick" tag="contextmenu1"></vue-context-menu>

Demo Code

<template>
    <div id="app">
	    <h1>Default</h1>
		<div class="click-area" @contextmenu="$vuecontextmenu()"></div>
		<vue-context-menu :menulists="menulists" @contentmenu-click="contentmenuClick"></vue-context-menu>

		<h1>contextmenu1</h1>
		<div class="click-area" @contextmenu="$vuecontextmenu('contextmenu1')"></div>
		<vue-context-menu :menulists="menulists1" @contentmenu-click="contentmenuClick" tag="contextmenu1"></vue-context-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            menulists: [
                {
                    name: 'copy',
                    caption: 'Copy    Ctrl+Ins'
                },{
                    name: 'Paste',
                    caption: 'Paste   Shift+Ins',
                    underline: true
                }
            ],
            menulists1: [
                {
                    name: 'open',
                    caption: 'Open    Ctrl+O'
                },{
                    name: 'find',
                    caption: 'Find... Ctrl+F'
                }
            ]
        }
	},
	methods: {
		contentmenuClick(name, tag) {
            let msg = 'contentmenuClick: ' + name;

            if (tag)
                msg += ' in ' + tag;

                console.log(msg);
        }
	}
}