@oiij/use/dist/composables/use-context-menu.mjs

Som Composable Functions for Vue 3

import { nextTick, ref } from "vue";
import { useEventListener } from "@vueuse/core";

//#region src/composables/use-context-menu.ts
function useContextMenu(templateRef) {
	const x = ref(0);
	const y = ref(0);
	const show = ref(false);
	function contextMenuEvent(e) {
		e.preventDefault();
		hide();
		nextTick(() => {
			show.value = true;
			x.value = e.clientX;
			y.value = e.clientY;
		});
	}
	function hide() {
		show.value = false;
	}
	useEventListener(templateRef, "contextmenu", contextMenuEvent);
	return {
		templateRef,
		x,
		y,
		show,
		hide,
		contextMenuEvent
	};
}

//#endregion
export { useContextMenu };