@duoa/vue-context-menu v1.0.3

Vue Context Menu

Context Menu (Right Click Menu) base on Vue2.x

Take a glance

Online Demo

Installation

npm i -S @duoa/vue-context-menu

Usage

Register the component

import Vue from 'vue'
import VueContextMenu from '@duoa/vue-context-menu'
// Because this components has its styles, you must also import the css file.
import '@duoa/vue-context-menu/dist/vue-context-menu.css'

// Register
Vue.use(VueContextMenu)

// You can also pass the options
Vue.use(VueImgPreview, {
  directiveName = 'ContextMenu', // Customizable directive name
  prototypeName = '$contextMenu', // Customizable Vue.prototype method name
  zIndex: 9999 // Context Menu z-index
})

You may now use the v-context-menu directive in your markup.

<template>
  <button v-context-menu="options">Right Click This Button</button>
</template>
<script>
export default {
  computed: {
    options () {
      return {
        width: 200,
        actions: [
          {
            label: 'Copy',
            subLabel: 'Ctrl + C',
            disabled: false,
            onClick: () => {
              console.log('copy')
            }
          },
          {
            type: 'sep' // seperator with a horizontal line
          },
          ...
        ]
      }
    }
  }
}
</script>

That's all you need to do!

If you want to manually open an context menu, you can you this.$contextMenu method.

export default {
  methods: {
    handleClick (e) {
      e.preventDefault()
      this.$contextMenu({
        // You must calculate the menu position by yourself.
        left: e.pageX,
        top: e.pageY,
        action: [
          ...
        ]
      })
    }
  }
}

Configuration

action items configuration