Я создаю контекстное меню, используя Vuejs @contextmenu.prevent api. Но при нажатии на элемент со стилем overflow:hidden это приводит к неправильному положению event.layerX & event.layerY.
new Vue({
el:'#app',
data: {
menuStyle: { top: '0px', left: '0px' },
menuOpen:false
},
methods: {
onContextMenu(e){
console.log('contextmenuevent',e)
this.menuStyle = {
top: `${e.layerY}px`,
left: `${e.layerX}px`
}
this.menuOpen = true
}
}
})
<html>
<body>
<div id="app" class="flex items-center justify-center h-screen">
<div
id="item"
class="p-8 bg-green-200 flex items-center"
@contextmenu.prevent="onContextMenu"
>
<div class="w-20 bg-red-200 truncate p-2">
Click me lorem ipsum dolor sit amet
</div>
<div class="non-overflow">Non overflow</div>
</div>
<div
v-if="menuOpen"
id="menu"
:style="menuStyle"
class="bg-white shadow p-4 absolute absolute"
>
this is menu
<button @click="menuOpen = false" class="bg-red-200 p-1">close</button>
</div>
</div>
</body>
</html>
Демо: https://codepen.io/showcheap/pen/YzPBmgp
Примечание: я использую попутный ветер css для укладки