1.0.2 • Published 6 years ago
vuejs-contextmenu-lan v1.0.2
vuejs-contextmenu-lan
Contextmenu component for vue2
Demo
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>