Contextmenu-like behavior with v-menu

[drhouse82]

Hi,

I try to create a context-menu that opens on right click with v-menu with vuetify 3.0.

Actually, it pretty much worked out easily except for the absolute positioning. From the docs I can only understand position relative to an activator. I use v-menu with v-model, without activator. The only way I can position it is through style="left: ..., top: ....". However, this inhibits automatic flipping of the menu when hitting the screen border during scrolling or so.

There is also this example page:
https://codingbeautydev.com/blog/vuetify-menu/
Here, they use the attributes "absolute" together with "position-x" and "position-y". Those appear to be gone in vuetify 3.0.

Does anyone understand how absolute positioning of v-menu works in vuetify 3.0 or is it just not posible?

[vincentwolf89]

Same question here :)

[firepick1]

I gave up and just put a button in the menu activation slot. Trying to get right-click menu activation on a complex component was just too hard.

[BobLiu0518]

I found a Prop of VMenu called 'target' in the current version of Vuetify:

For locationStrategy=“connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to.

One option for it is string 'cursor', but it's not working for me (I wonder why), but array [x, y] works, and can be set to the coordinate of PointerEvent.

Hope this helps.

[firepick1]

THank you.

[craigrileyuk]

Here's a composable you might find useful:

import { ref, h } from "vue";
import { VMenu } from "vuetify/components/VMenu";

export const useContextMenu = () => {
	const show = ref(false);
	const x = ref(0);
	const y = ref(0);

	const ContextMenu = {
		setup(_, { slots, attrs }) {
			return () =>
				h(
					VMenu,
					{
						modelValue: show.value,
						target: [x.value, y.value],
						locationStrategy: "connected",
						scrim: false,
						...attrs,
						"onUpdate:modelValue": ($event) => (show.value = $event),
					},
					slots,
				);
		},
	};

	const openFromEvent = (ev) => {
		x.value = ev.clientX;
		y.value = ev.clientY;
		show.value = true;
	};

	return {
		show,
		x,
		y,
		ContextMenu,
		openFromEvent,
	};
};

Usage

<template>
    <VDataTable @contextmenu:row.prevent="onContextMenu"></VDataTable>
    <ContextMenu>
        <VList>
            <!-- Menu code here -->
        </VList>
    </ContextMenu>
</template>

<script setup>
const { ContextMenu, openFromEvent } = useContextMenu();

const onContextMenu = (ev, { item }) => {
    // Set up menu code
    openFromEvent(ev);
};
</script>