vue3 标签页右键菜单

在 Vue3 中实现标签页右键菜单可以通过以下步骤：

1. 创建一个标签页组件，使用 `v-for` 循环渲染，为每个标签页添加一个唯一的 `id` 值。
2. 在标签页组件上监听 `contextmenu` 事件，阻止默认事件，触发自定义事件。
3. 在父组件中监听标签页组件的自定义事件，获取当前点击的标签页的 `id` 值。
4. 使用 `event.clientX` 和 `event.clientY` 获取鼠标右键点击的位置。
5. 在父组件中渲染一个弹出菜单组件，根据传入的标签页 `id` 值和鼠标点击位置，确定弹出菜单的位置和内容。

下面是一个简单的示例代码：

<template>
  <div>
    <div v-for="tab in tabs" :key="tab.id" @contextmenu.prevent="showContextMenu(tab.id)">
      {{ tab.title }}
    </div>
    <ContextMenu v-if="showMenu" :x="menuX" :y="menuY" @close="hideContextMenu" />
  </div>
</template>

<script>
import ContextMenu from './ContextMenu.vue'

export default {
  components: { ContextMenu },
  data() {
    return {
      tabs: [
        { id: 1, title: 'Tab 1' },
        { id: 2, title: 'Tab 2' },
        { id: 3, title: 'Tab 3' },
      ],
      showMenu: false,
      menuX: 0,
      menuY: 0,
      activeTabId: null,
    }
  },
  methods: {
    showContextMenu(id) {
      this.activeTabId = id
      this.menuX = event.clientX
      this.menuY = event.clientY
      this.showMenu = true
    },
    hideContextMenu() {
      this.showMenu = false
    },
  },
}
</script>

在上面的代码中，我们创建了一个标签页组件，并在组件上监听了 `contextmenu` 事件，触发了 `showContextMenu` 方法。在父组件中，我们监听了标签页组件的自定义事件，并获取了当前点击的标签页的 `id` 值和鼠标点击位置。然后根据这些值，渲染了一个弹出菜单组件。