vue3 右键子组件形式弹出菜单

在Vue3中，你可以使用 Vue 的`v-on`指令来监听右键点击事件，然后在事件处理程序中触发弹出菜单的显示。

以下是一个简单的实现：

首先在子组件中，使用`v-on`监听右键点击事件，并将事件对象传递给方法：

<template>
  <div v-on:contextmenu.prevent="showMenu($event)">
    <!-- 子组件内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    showMenu(event) {
      // 显示菜单
    }
  }
}
</script>

在父组件中，使用`v-show`或`v-if`指令控制菜单的显示和隐藏。同时，使用`v-on`指令监听`click`事件，以便在用户点击菜单之外的区域时隐藏菜单。

<template>
  <div>
    <!-- 父组件内容 -->
    <div v-show="showMenu" v-on:click="hideMenu">
      <!-- 菜单内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false
    }
  },
  methods: {
    showMenu(event) {
      this.showMenu = true
      // 设置菜单位置
      // ...
    },
    hideMenu(event) {
      if (!event.target.closest('.menu')) {
        this.showMenu = false
      }
    }
  }
}
</script>

上述代码中，`v-show`指令根据`showMenu`的值来控制菜单的显示和隐藏。`v-on:click`指令监听点击事件，并判断点击的元素是否在菜单内部。如果不在，则隐藏菜单。

在`showMenu`方法中，你可以设置菜单的位置（例如，使用`event.clientX`和`event.clientY`来设置菜单的左上角坐标）。