lb-vue-floatmenu

lb-vue-floatmenu

Screenshot

Description

Vue2.js floating for usage with right click (context menu) or any other required floating parts

Install

npm install lb-vue-floatmenu --save

Include plugin in your main.js file.

import Vue from 'vue'
import lbVueFloatmenu from 'lb-vue-floatmenu';
Vue.component('lb-vue-floatmenu', lbVueFloatmenu);

Using

template code

<template>
    <div v-on:contextmenu.prevent="$refs.someref.open($event, {name: 'test'})"></div>
    <lb-vue-floatmenu ref="someref">
        <template v-slot="{item}">
            <ul v-if="item">
                <li>Some option {{item.name}}</li>
            </ul>
        </template>
    </lb-vue-floatmenu>
</template>

template code when in v-for

<template>
    <div v-for="item in items">
        <div v-on:contextmenu.prevent="$refs['someref'+item.id][0].open($event, item)"></div>
        <lb-vue-floatmenu :ref="someref[item.id]">
            <template v-slot="{item}">
                <ul v-if="item">
                    <li>Some option {{item.name}}</li>
                </ul>
            </template>
        </lb-vue-floatmenu>
    </div>
</template>

Available settings

Property	Type	Required	Description
ref	string	*	reference name for context menu