v-context

A Vue.js Plugin

Usage no npm install needed!

<script type="module">
  import vContext from 'https://cdn.skypack.dev/v-context';
</script>

README

VueContext

npm vue2

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>

License

MIT