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
{}
popper
{}
{}
modelValue
boolean
false
Preset
appConfig.ui.contextMenu
{
"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
}
}