Vue-contextmenu-json NPM

Vue-Contextmenu-json

A contextmenu component for Vue.The most thought i want to show is Use the contextmenu without template,you just need a json data and a directive which binds on the element.

Usage

in main.js

import VueContextMenu from 'vue-contextmenu-json';

Vue.use(VueContextmenu);

in *.vue

<template>
    <div>
        <anyElement v-contextmenu='{array:theArrayData,id:theIdYouWant}'></anyElement>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                theArrayData:[
                    {name:'Operation 1',function:'funca',child:null},
                    {name:'Operation 2',function:'funca',child:[
                        {name:'Operation 2-1',function:'funca'}
                    ]}
                ]
            }
        },
        methods:{
            funca () {
                console.log(1);
            }
        }
    }
</script>

You can bind directive in any Template you want ,and you don't need to write the Contextmenu Template.

Modifiers

click
You can left click your element to show menu

<anyElement v-contextmenu.click='{...}'>

Parameter

name	type	content
array	Array	the json object which defined in your data function,every element is Object
id	String	distinguish from more contextmenus in one vue template

And the array parameter is

name	type	content
name	String	the contextmenu name
function	String	the contextmenu operation you want to use,just the `function name` you defined in methods object.You can use `this` to be vue instance,and `node` to be the element you open contextmenu
child	Array	the submenu or subsubsubsubmenu :) ,which should same format parameter

Example

<template>
    <div>
        <ul v-contextmenu='{array:ctmArray,id:"c"}'>
            <li v-for='item in array' :key='item.name'>
                    {{item.name}}
            </li>
        </ul>
        <!--
        <button @click='comName = null'>button</button>
        <i-ctm  v-if='comName === "i-ctm"' :array='ctmArray'></i-ctm>
        -->
    </div>
</template>

<script>
import iCtm from './components/contextmenu/index.js'
export default {
    name:'app',
    components:{
        'i-ctm':iCtm
    },
    data () {
        return {
            comName:'i-ctm',
            array:[
                {name:'Li 1'},
                {name:'Li 2'}
            ],
            ctmArray:[
                {name:'button 1',function:'funca',child:[
                    {name:'1-1111111',function:'funca',child:[
                        {name:'1-1111-11111',function:'funca'}
                    ]}
                ]},
                {name:'button 2',function:'funca'},
                {name:'button 3',function:'funca'},
                {name:'button 4',function:'funca'}
            ]
        }
    },
    methods:{
        funca (node) {
            this.array.push({name:'Li 3'});
            console.log(node); //  the element you open contextmenu, like 'Li 3' li
        }
    }
}
</script>