vuejs-contextmenu-lan

Contextmenu component for vue2

Demo

• Demo
• Code

Installation (node.js)

$ npm install vuejs-contextmenu-lan -s

$ yarn add vuejs-contextmenu-lan

Vue mount

// mount with global
import ContextMenu from 'vuejs-contextmenu-lan'
Vue.use(ContextMenu)

Usage

<template>
  <div>
    <div @contextmenu.prevent="open('Test Area')">
      Test Area
    </div>
    <v-context-menu :data="contextMenuData"></v-context-menu>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        contextMenuData: {
          menuData: {},
          menuName: 'content-menu',
          position: {
            x: null,
            y: null
          },
          menulists: [
            {
              fnHandler: this.test1,  // Binding events
              btnName: 'Test Class 1' // The name of the menu option
            },
            {
              fnHandler: this.test2,
              btnName: 'Test Class 2'
            },
            {
              fnHandler: this.test3,
              btnName: 'Test Class 3'
            },
            {
              fnHandler: this.test4,
              btnName: 'Test Class 4'
            },
            {
              fnHandler: this.test5,
              btnName: 'Test Class 5'
            }
          ]
        }
      }
    },
    methods: {
      open (val) {
        event.preventDefault()
        const x = event.clientX
        const y = event.clientY
        this.contextMenuData.position = { x, y }
        this.contextMenuData.menuData = val
      },
      test1 (val) {
        console.log('test1: ', val)
      },
      test2( val) {
        console.log('test2: ', val)
      },
      test3 (val) {
        console.log('test3: ', val)
      },
      test4 (val) {
        console.log('test4: ', val)
      },
      test5 (val) {
        console.log('test5: ', val)
      }
    }
  }
  </script>

Authors

• ChingFang Lin