<ContextMenu ref="contextMenu" :menu-items="menuItems"/> <div class="context-menu-trigger" @click.right.prevent="$refs.contextMenu.open($event)"> Right Click Me! </div>import ContextMenu from 'vue-context-menu-popup' import 'vue-context-menu-popup/dist/vue-context-menu-popup.css'; export default { data() { return { menuItems: [ { label: 'First Menu Item', }, { label: 'Disabled Menu Item', disabled: true, }, { label: 'I have children', children: [ { label: 'Child Item 1', }, { label: 'I also have children', children: [ { label: 'Child Item 2', }, ], }, ], }, ] } }, components: { ContextMenu } }A simple context menu component
<ContextMenu :menu-items="[....]"/>menu-itemsArray (required)
visible
initial value: false
contextMenuPosition
initial value: [object Object]
openPosition
initial value: 'context-menu-open-right'
-
close() -
open(position)Accepts an Object with an
x, yposition or an instance of Event
npm install vue-context-menu-popup npm install npm run serve npm run build npm run lint npm run test:unit npm run doc:build