vue3 element-plus 中右键显示菜单，让菜单显示在右键的位置上

在Vue3配合Element Plus中，实现右键菜单通常会利用`@contextmenu.prevent`事件监听用户右键点击，并通过自定义组件或者弹出层来展示菜单。下面是一个简单的步骤说明：

1. 首先，在HTML模板上添加一个右键可触发的元素，比如一个div，并设置其`@contextmenu.prevent`事件：

<div @contextmenu.prevent="showMenu" @click.native="$event.stopPropagation()">右键这里</div>

2. 在你的组件内，创建一个名为`showMenu`的方法，用于显示菜单。你可以选择动态生成菜单内容，如从API获取数据，或者直接硬编码在data里：

export default {
  data() {
    return {
      menuItems: [
        { name: '选项1', action: this.action1 },
        { name: '选项2', action: this.action2 },
        // 更多选项...
      ],
    };
  },
  methods: {
    showMenu(e) {
      const event = new MouseEvent('contextmenu', { bubbles: true });
      e.preventDefault();
      document.body.appendChild(this.$refs.menu); // 可能需要一个自定义的弹出层或者第三方库
      event.initEvent('contextmenu', true, true);
      document.dispatchEvent(event);
    },
    action1() {
      console.log('执行动作1');
    },
    action2() {
      console.log('执行动作2');
    }
  },
  // 如果有，记得销毁并移除菜单
  beforeDestroy() {
    if (this.$refs.menu && this.$refs.menu.parentNode) {
      this.$refs.menu.parentNode.removeChild(this.$refs.menu);
    }
  },
};

在这里，`$refs.menu`假设你有一个已经渲染好的菜单组件，例如Element UI的`el-menu`。