App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<template> <div> <div class="item-wrapper"> <div v-for="item in items" :key="item.id" @click.prevent.stop="handleClick($event, item)" class="item-wrapper__item" > {{ item.name }} </div> </div> <vue-simple-context-menu element-id="myUniqueId" :options="options" ref="vueSimpleContextMenu" @option-clicked="optionClicked" /> </div> </template> <script> import VueSimpleContextMenu from 'vue-simple-context-menu'; import 'vue-simple-context-menu/dist/vue-simple-context-menu.css'; export default { name: 'App', components: { VueSimpleContextMenu, }, data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, ], options: [ { name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }, { type: 'divider' }, { name: 'Option 4' }, ], }; }, methods: { handleClick(event, item) { this.$refs.vueSimpleContextMenu.showMenu(event, item); }, optionClicked(event) { window.alert(JSON.stringify(event)); }, }, }; </script> <style scoped> .item-wrapper { display: flex; flex-direction: column; } .item-wrapper__item { padding: 10px; cursor: pointer; } .item-wrapper__item:hover { background-color: #f0f0f0; } </style> |
