README
VueContext
A Vue.js Plugin
Installation
npm install --save v-context
Bundler (Webpack, Rollup)
import Vue from 'vue'
import VueContext from 'v-context'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'v-context/dist/v-context.css'
Vue.use(VueContext)
Browser
<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="v-context/dist/v-context.css"></link>
<script src="v-context/dist/v-context.js"></script>
<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/v-context/dist/v-context.css"></link>
<script src="https://unpkg.com/v-context"></script>
Usage
Template
<template>
<div class="context-menu-example">
<h1 @contextmenu.prevent="$refs.ctx.open">Vue context menu example</h1>
<vue-context
@select="myMethod"
:list="list"
ref="ctx">
</vue-context>
</div>
</template>
Script
<script>
export default {
name: 'ContextExample',
data() {
return {
list: [
{
icon: 'trash',
label: 'Remove',
},
{
icon: 'edit',
label: 'Edit',
},
{
icon: 'arrows-alt',
label: 'Rearrange',
},
{
icon: 'copy',
label: 'Copy',
},
],
};
},
methods: {
myMethod(selectedItem) {
// Do something
}
}
};
</script>