BigScreen/src/views/VideoBox/components/rightClick.vue

<template>
  <ul
    v-if="show"
    :style="{ top: y + 'px', left: x + 'px' }"
    class="absolute c-#fff right-box py-1 flex flex-col items-center justify-center bg-#2262acb3"
  >
    <li
      class="px-4 py-1 cursor-pointer hover:bg-#2262ac mb-2 last:mb-0"
      @click="item.handler"
      v-for="(item, i) in menu"
      :key="i"
      >{{ item.label }}</li
    >
  </ul>
</template>
<script setup>
  import { useModal } from 'naive-ui'
  import { useOutsideSystemStore } from '@/stores/modules/system.js'
  import AddTag from './addTag.vue'

  const show = defineModel()
  const modal = useModal()
  const useSystem = useOutsideSystemStore()
  const props = defineProps({
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    }
  })
  const menu = [
    {
      label: '创建标签',
      handler: () => {
        show.value = false
        modal.create({
          title: '新建标签',
          draggable: true,
          preset: 'card',
          maskClosable: false,
          content: () =>
            h(AddTag, {
              baseInfo: {
                X: props.x / useSystem.ratio.wR,
                Y: props.y / useSystem.ratio.hR
              },
              onCloseAddTagModal: () => modal.destroyAll()
            })
        })
      }
    }
  ]
</script>