Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 06:34:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: use v-bind for context menu position

Browse source
This commit is contained in:
Phan An 2024-04-23 22:36:46 +02:00
parent ece143aa04
commit 8f1aebb357
1 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/assets/js/components/ui/ContextMenuBase.vue
View file

@ -5,7 +5,6 @@
v-koel-clickaway="close"
v-koel-focus
:class="extraClass"
:style="{ top: `${top}px`, left: `${left}px` }"
class="menu context-menu select-none"
tabindex="0"
@contextmenu.prevent
@ -26,8 +25,8 @@ const { extraClass } = toRefs(props)
const el = ref<HTMLElement>()
const shown = ref(false)
const top = ref(0)
const left = ref(0)
const top = ref('0')
const left = ref('0')
const preventOffScreen = async (element: HTMLElement, isSubmenu = false) => {
const { bottom, right } = element.getBoundingClientRect()
@ -88,8 +87,8 @@ const initSubmenus = () => {
}
const open = async (t = 0, l = 0) => {
top.value = t
left.value = l
top.value = `${t}px`
left.value = `${l}px`
shown.value = true
await nextTick()
@ -116,6 +115,9 @@ defineExpose({ open, close, shown })
<style lang="postcss" scoped>
nav {
top: v-bind(top);
left: v-bind(left);
:deep(.has-sub) {
@apply after:absolute after:right-0 after:top-0 after:z-[2] after:opacity-0;
}