fuse-code/src/components/right-menu/index.vue

<template>
  <Dropdown v-model:open="open" overlayClassName="down-item">
    <span class="proce" :style="{ left: pixel.x + 'px', top: pixel.y + 'px' }"></span>
    <template #overlay>
      <Menu>
        <MenuItem @click="clickHandler(menu)" v-for="menu in menus">
          <template #icon><ui-icon :type="menu.icon" /></template>
          {{ menu.label }}
        </MenuItem>
      </Menu>
    </template>
  </Dropdown>
</template>

<script lang="ts" setup>
import { Dropdown, Menu, MenuItem } from "ant-design-vue";
import { RMenu } from ".";
import { Pos } from "../drawing/dec";
import { ref, watchEffect } from "vue";

const props = defineProps<{ menus: RMenu[]; pixel: Pos; onClose: () => void }>();

const open = ref(true);
watchEffect(() => {
  if (!open.value) {
    props.onClose();
  }
});

const clickHandler = (menu: RMenu) => {
  menu.handler();
  props.onClose();
};
</script>

<style lang="scss" scoped>
.proce {
  position: absolute;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  z-index: 99;
}
</style>