用vue3写一个右键自定义菜单的组件

当然，我可以帮你写一个用Vue 3编写的自定义右键菜单组件。以下是一个简单的示例：

1. 首先，创建一个名为`ContextMenu.vue`的组件文件。

<template>
  <div class="context-menu" :style="{ top: `${top}px`, left: `${left}px` }">
    <ul>
      <li v-for="(item, index) in items" :key="index" @click="handleItemClick(item.action)">
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    top: {
      type: Number,
      required: true
    },
    left: {
      type: Number,
      required: true
    }
  },
  methods: {
    handleItemClick(action) {
      // 执行相应的操作
      if (action) {
        this[action]();
      }
    },
    // 示例操作函数
    exampleAction() {
      console.log("执行了示例操作");
    }
  }
};
</script>

<style scoped>
.context-menu {
  position: fixed;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 8px;
}
</style>

2. 在需要使用右键菜单的地方，引入并使用`ContextMenu`组件。

<template>
  <div class="container" @contextmenu.prevent="showContextMenu($event)">
    右键点击此处显示菜单
    <ContextMenu v-if="showMenu" :items="menuItems" :top="menuTop" :left="menuLeft" />
  </div>
</template>

<script>
import ContextMenu from "@/components/ContextMenu.vue";

export default {
  components: {
    ContextMenu
  },
  data() {
    return {
      showMenu: false,
      menuItems: [
        { label: "菜单项1", action: "exampleAction" },
        { label: "菜单项2", action: "exampleAction" },
        { label: "菜单项3", action: "exampleAction" }
      ],
      menuTop: 0,
      menuLeft: 0
    };
  },
  methods: {
    showContextMenu(event) {
      event.preventDefault();
      this.showMenu = true;
      this.menuTop = event.clientY;
      this.menuLeft = event.clientX;
    },
    exampleAction() {
      console.log("执行了示例操作");
    }
  }
};
</script>

<style scoped>
.container {
  width: 200px;
  height: 200px;
  background-color: lightgray;
}
</style>

这个示例中，我们创建了一个`ContextMenu`组件，它接收一个菜单项数组和菜单显示的位置作为props。当右键点击触发`@contextmenu.prevent`事件时，显示右键菜单，并根据鼠标位置设置菜单的top和left样式。

请注意，这只是一个简单的示例，你可以根据自己的需求对菜单样式和行为进行进一步的定制。希望对你有所帮助！如果你还有其他问题，请随时提问。