<template> <DocSectionText v-bind="$attrs"> <p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using the <i>contextmenu</i> event of the target to display the menu.</p> </DocSectionText> <div class="card flex md:justify-content-center"> <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" /> <ContextMenu ref="menu" :model="items" /> </div> <DocSectionCode :code="code" /> </template> <script> export default { data() { return { items: [ { label: 'File', icon: 'pi pi-fw pi-file', items: [ { label: 'New', icon: 'pi pi-fw pi-plus', items: [ { label: 'Bookmark', icon: 'pi pi-fw pi-bookmark' }, { label: 'Video', icon: 'pi pi-fw pi-video' } ] }, { label: 'Delete', icon: 'pi pi-fw pi-trash' }, { separator: true }, { label: 'Export', icon: 'pi pi-fw pi-external-link' } ] }, { label: 'Edit', icon: 'pi pi-fw pi-pencil', items: [ { label: 'Left', icon: 'pi pi-fw pi-align-left' }, { label: 'Right', icon: 'pi pi-fw pi-align-right' }, { label: 'Center', icon: 'pi pi-fw pi-align-center' }, { label: 'Justify', icon: 'pi pi-fw pi-align-justify' } ] }, { label: 'Users', icon: 'pi pi-fw pi-user', items: [ { label: 'New', icon: 'pi pi-fw pi-user-plus' }, { label: 'Delete', icon: 'pi pi-fw pi-user-minus' }, { label: 'Search', icon: 'pi pi-fw pi-users', items: [ { label: 'Filter', icon: 'pi pi-fw pi-filter', items: [ { label: 'Print', icon: 'pi pi-fw pi-print' } ] }, { icon: 'pi pi-fw pi-bars', label: 'List' } ] } ] }, { label: 'Events', icon: 'pi pi-fw pi-calendar', items: [ { label: 'Edit', icon: 'pi pi-fw pi-pencil', items: [ { label: 'Save', icon: 'pi pi-fw pi-calendar-plus' }, { label: 'Delete', icon: 'pi pi-fw pi-calendar-minus' } ] }, { label: 'Archieve', icon: 'pi pi-fw pi-calendar-times', items: [ { label: 'Remove', icon: 'pi pi-fw pi-calendar-minus' } ] } ] }, { separator: true }, { label: 'Quit', icon: 'pi pi-fw pi-power-off' } ], code: { basic: ` <img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" /> <ContextMenu ref="menu" :model="items" />`, options: ` <template> <div class="card flex md:justify-content-center"> <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" /> <ContextMenu ref="menu" :model="items" /> </div> </template> <script> export default { data() { return { items: [ { label: 'File', icon: 'pi pi-fw pi-file', items: [ { label: 'New', icon: 'pi pi-fw pi-plus', items: [ { label: 'Bookmark', icon: 'pi pi-fw pi-bookmark' }, { label: 'Video', icon: 'pi pi-fw pi-video' } ] }, { label: 'Delete', icon: 'pi pi-fw pi-trash' }, { separator: true }, { label: 'Export', icon: 'pi pi-fw pi-external-link' } ] }, { label: 'Edit', icon: 'pi pi-fw pi-pencil', items: [ { label: 'Left', icon: 'pi pi-fw pi-align-left' }, { label: 'Right', icon: 'pi pi-fw pi-align-right' }, { label: 'Center', icon: 'pi pi-fw pi-align-center' }, { label: 'Justify', icon: 'pi pi-fw pi-align-justify' } ] }, { label: 'Users', icon: 'pi pi-fw pi-user', items: [ { label: 'New', icon: 'pi pi-fw pi-user-plus' }, { label: 'Delete', icon: 'pi pi-fw pi-user-minus' }, { label: 'Search', icon: 'pi pi-fw pi-users', items: [ { label: 'Filter', icon: 'pi pi-fw pi-filter', items: [ { label: 'Print', icon: 'pi pi-fw pi-print' } ] }, { icon: 'pi pi-fw pi-bars', label: 'List' } ] } ] }, { label: 'Events', icon: 'pi pi-fw pi-calendar', items: [ { label: 'Edit', icon: 'pi pi-fw pi-pencil', items: [ { label: 'Save', icon: 'pi pi-fw pi-calendar-plus' }, { label: 'Delete', icon: 'pi pi-fw pi-calendar-minus' } ] }, { label: 'Archieve', icon: 'pi pi-fw pi-calendar-times', items: [ { label: 'Remove', icon: 'pi pi-fw pi-calendar-minus' } ] } ] }, { separator: true }, { label: 'Quit', icon: 'pi pi-fw pi-power-off' } ] }; }, methods: { onImageRightClick(event) { this.$refs.menu.show(event); } } }; <\/script>`, composition: ` <template> <div> <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" /> <ContextMenu ref="menu" :model="items" /> </div> </template> <script setup> import { ref } from 'vue'; const menu = ref(); const items = ref([ { label:'File', icon:'pi pi-fw pi-file', items:[ { label:'New', icon:'pi pi-fw pi-plus', items:[ { label:'Bookmark', icon:'pi pi-fw pi-bookmark' }, { label:'Video', icon:'pi pi-fw pi-video' } ] }, { label:'Delete', icon:'pi pi-fw pi-trash' }, { separator:true }, { label:'Export', icon:'pi pi-fw pi-external-link' } ] }, { label:'Edit', icon:'pi pi-fw pi-pencil', items:[ { label:'Left', icon:'pi pi-fw pi-align-left' }, { label:'Right', icon:'pi pi-fw pi-align-right' }, { label:'Center', icon:'pi pi-fw pi-align-center' }, { label:'Justify', icon:'pi pi-fw pi-align-justify' } ] }, { label:'Users', icon:'pi pi-fw pi-user', items:[ { label:'New', icon:'pi pi-fw pi-user-plus', }, { label:'Delete', icon:'pi pi-fw pi-user-minus', }, { label:'Search', icon:'pi pi-fw pi-users', items:[ { label:'Filter', icon:'pi pi-fw pi-filter', items:[ { label:'Print', icon:'pi pi-fw pi-print' } ] }, { icon:'pi pi-fw pi-bars', label:'List' } ] } ] }, { label:'Events', icon:'pi pi-fw pi-calendar', items:[ { label:'Edit', icon:'pi pi-fw pi-pencil', items:[ { label:'Save', icon:'pi pi-fw pi-calendar-plus' }, { label:'Delete', icon:'pi pi-fw pi-calendar-minus' } ] }, { label:'Archieve', icon:'pi pi-fw pi-calendar-times', items:[ { label:'Remove', icon:'pi pi-fw pi-calendar-minus' } ] } ] }, { separator:true }, { label:'Quit', icon:'pi pi-fw pi-power-off' } ]); const onImageRightClick = (event) => { menu.value.show(event); }; <\/script>` } }; }, methods: { onImageRightClick(event) { this.$refs.menu.show(event); } } }; </script>