arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-31 04:07:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve ContextMenu example

Browse Source
This commit is contained in:
Benjamin Canac
2023-05-14 15:08:16 +02:00
parent cfcd2f1371
commit 6fd5a70ac9
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/components/content/examples/ContextMenuExample.vue
View File

@@ -1,11 +1,12 @@
<script setup> <script setup>
const { x, y } = useMouse() const { x, y } = useMouse()
const { y: windowY } = useWindowScroll()
const isOpen = ref(false) const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) }) const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function openContextMenu () { function onContextMenu () {
const top = unref(y) const top = unref(y) - unref(windowY)
const left = unref(x) const left = unref(x)
virtualElement.value.getBoundingClientRect = () => ({ virtualElement.value.getBoundingClientRect = () => ({
@@ -20,8 +21,8 @@ function openContextMenu () {
</script> </script>
<template> <template>
<div class="w-full" @contextmenu.prevent="openContextMenu"> <div class="w-full" @contextmenu.prevent="onContextMenu">
<Placeholder class="h-20 w-full flex items-center justify-center"> <Placeholder class="h-96 select-none w-full flex items-center justify-center">
Right click here Right click here
</Placeholder> </Placeholder>

7
docs/content/5.overlays/5.context-menu.md
View File

@@ -11,12 +11,13 @@ github: true
```vue ```vue
<script setup> <script setup>
const { x, y } = useMouse() const { x, y } = useMouse()
const { y: windowY } = useWindowScroll()
const isOpen = ref(false) const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) }) const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function openContextMenu () { function onContextMenu () {
const top = unref(y) const top = unref(y) - unref(windowY)
const left = unref(x) const left = unref(x)
virtualElement.value.getBoundingClientRect = () => ({ virtualElement.value.getBoundingClientRect = () => ({
@@ -31,7 +32,7 @@ function openContextMenu () {
</script> </script>
<template> <template>
<div @contextmenu.prevent="openContextMenu"> <div @contextmenu.prevent="onContextMenu">
<UContextMenu v-model="isOpen" :virtual-element="virtualElement"> <UContextMenu v-model="isOpen" :virtual-element="virtualElement">
<!-- Content --> <!-- Content -->
</UContextMenu> </UContextMenu>