overlays
ContextMenu
Display a menu that appears on right click.
Usage
Right click here
<script setup>const { x, y } = useMouse()const { y: windowY } = useWindowScroll()const isOpen = ref(false)const virtualElement = ref({ getBoundingClientRect: () => ({}) })function onContextMenu () { const top = unref(y) - unref(windowY) const left = unref(x) virtualElement.value.getBoundingClientRect = () => ({ width: 0, height: 0, top, left }) isOpen.value = true}</script><template> <div @contextmenu.prevent="onContextMenu"> <UContextMenu v-model="isOpen" :virtual-element="virtualElement"> <!-- Content --> </UContextMenu> </div></template>Props
virtualElementrequired
Record<string, any>
ui
any
undefined
popper
{}
{}
modelValue
boolean
false
Preset
{ "wrapper": "relative", "container": "z-20", "width": "", "background": "bg-white dark:bg-gray-900", "shadow": "shadow-lg", "rounded": "rounded-md", "ring": "ring-1 ring-gray-200 dark:ring-gray-800", "base": "overflow-hidden focus:outline-none", "transition": { "enterActiveClass": "transition ease-out duration-200", "enterFromClass": "opacity-0 translate-y-1", "enterToClass": "opacity-100 translate-y-0", "leaveActiveClass": "transition ease-in duration-150", "leaveFromClass": "opacity-100 translate-y-0", "leaveToClass": "opacity-0 translate-y-1" }, "popper": { "placement": "bottom-start", "scroll": false }}