diff --git a/src/components/contextmenu/ContextMenu.d.ts b/src/components/contextmenu/ContextMenu.d.ts index 7aad5173a..ddb165c5c 100644 --- a/src/components/contextmenu/ContextMenu.d.ts +++ b/src/components/contextmenu/ContextMenu.d.ts @@ -1,11 +1,11 @@ import Vue from 'vue'; export declare class ContextMenu extends Vue { - popup?: boolean; model?: any[]; appendTo?: string; autoZIndex?: boolean; baseZIndex?: number; + global?: boolean; toggle(event: Event): void; show(event: Event, target?: any): void; hide(): void; diff --git a/src/components/contextmenu/ContextMenu.vue b/src/components/contextmenu/ContextMenu.vue index 0844bf69e..c322ad981 100644 --- a/src/components/contextmenu/ContextMenu.vue +++ b/src/components/contextmenu/ContextMenu.vue @@ -12,10 +12,6 @@ import ContextMenuSub from './ContextMenuSub'; export default { props: { - popup: { - type: Boolean, - default: false - }, model: { type: Array, default: null @@ -31,11 +27,16 @@ export default { baseZIndex: { type: Number, default: 0 + }, + global: { + type: Boolean, + default: false } }, target: null, outsideClickListener: null, resizeListener: null, + documentContextMenuListener: null, pageX: null, pageY: null, data() { @@ -47,6 +48,7 @@ export default { this.restoreAppend(); this.unbindResizeListener(); this.unbindOutsideClickListener(); + this.unbindDocumentContextMenuListener(); }, methods: { itemClick(event) { @@ -87,6 +89,10 @@ export default { this.bindOutsideClickListener(); this.bindResizeListener(); + if (this.global) { + this.bindDocumentContextMenuListener(); + } + if (this.autoZIndex) { this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex()); } @@ -94,6 +100,10 @@ export default { onLeave() { this.unbindOutsideClickListener(); this.unbindResizeListener(); + + if (this.global) { + this.unbindDocumentContextMenuListener(); + } }, position() { let left = this.pageX + 1; @@ -172,6 +182,21 @@ export default { else document.getElementById(this.appendTo).removeChild(this.$refs.container); } + }, + bindDocumentContextMenuListener() { + if (!this.documentContextMenuListener) { + this.documentContextMenuListener = (event) => { + this.show(event); + }; + + document.addEventListener('contextmenu', this.documentContextMenuListener); + } + }, + unbindDocumentContextMenuListener() { + if(this.documentContextMenuListener) { + document.removeEventListener('contextmenu', this.documentContextMenuListener); + this.documentContextMenuListener = null; + } } }, computed: { diff --git a/src/views/contextmenu/ContextMenuDoc.vue b/src/views/contextmenu/ContextMenuDoc.vue index 978f0be53..f9e6bfd79 100644 --- a/src/views/contextmenu/ContextMenuDoc.vue +++ b/src/views/contextmenu/ContextMenuDoc.vue @@ -12,9 +12,6 @@ import TieredMenu from 'primevue/tieredmenu';

Getting Started

TieredMenu requires a collection of menuitems as its model.

- -<TieredMenu :model="items" /> - export default { @@ -156,17 +153,32 @@ export default { } -

Popup Mode

-

TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.

+

Document Menu

+

Setting global property attaches the context menu to the document.

+ +<ContextMenu :global="true" :model="items" /> + + +

Element Menu

+

ContextMenu is attached to a custom element manually using the reference and calling the show(event) method.

-<Button type="button" label="Toggle" @click="toggle" /> -<TieredMenu ref="menu" :model="items" :popup="true" /> +<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"> +<ContextMenu ref="menu" :model="items" /> -toggle(event) { - this.$refs.menu.toggle(event); +export default { + data() { + return { + items: //items + } + }, + methods: { + onImageRightClick(event) { + this.$refs.menu.show(event); + } + } } @@ -189,12 +201,6 @@ toggle(event) { null An array of menuitems. - - popup - boolean - false - Defines if menu would displayed as a popup. - appendTo string @@ -212,6 +218,12 @@ toggle(event) { boolean true Whether to automatically manage layering. + + + global + boolean + false + Attaches the menu to document instead of a particular item. @@ -231,18 +243,17 @@ toggle(event) { toggle event: Browser event - Toggles the visiblity of the overlay. + Toggles the visibility of the menu. show - event: Browser event
- target: Optional target if event.target would not be used - Shows the overlay. + event: Browser event + Shows the menu. hide - - Hides the overlay. + Hides the menu. @@ -260,7 +271,7 @@ toggle(event) { - p-tieredmenu + p-contextmenu Container element. @@ -292,17 +303,13 @@ toggle(event) { - + View on GitHub @@ -444,8 +451,8 @@ export default { } }, methods: { - toggle(event) { - this.$refs.menu.toggle(event); + onImageRightClick(event) { + this.$refs.menu.show(event); } } } diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue index 6d674a04a..50598cd78 100644 --- a/src/views/menu/MenuDoc.vue +++ b/src/views/menu/MenuDoc.vue @@ -143,7 +143,7 @@ toggle(event) { toggle event: Browser event - Toggles the visiblity of the overlay. + Toggles the visibility of the overlay. show diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue index f2d8aede9..c7e9d7fda 100644 --- a/src/views/menubar/MenubarDoc.vue +++ b/src/views/menubar/MenubarDoc.vue @@ -224,7 +224,7 @@ export default { - + View on GitHub diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue index be19a1c26..761491e67 100644 --- a/src/views/overlaypanel/OverlayPanelDoc.vue +++ b/src/views/overlaypanel/OverlayPanelDoc.vue @@ -92,7 +92,7 @@ toggle(event) { toggle event: Browser event - Toggles the visiblity of the overlay. + Toggles the visibility of the overlay. show diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue index 978f0be53..ac2b65423 100644 --- a/src/views/tieredmenu/TieredMenuDoc.vue +++ b/src/views/tieredmenu/TieredMenuDoc.vue @@ -231,7 +231,7 @@ toggle(event) { toggle event: Browser event - Toggles the visiblity of the overlay. + Toggles the visibility of the overlay. show