vue 右键菜单组件

你可以使用 Vue.js 来创建一个右键菜单组件。下面是一个简单的示例：

<template>
  <div>
    <div v-if="showMenu" class="menu" style="top: {{ y }}px; left: {{ x }}px;">
      <ul>
        <li @click="handleClick('Option 1')">Option 1</li>
        <li @click="handleClick('Option 2')">Option 2</li>
        <li @click="handleClick('Option 3')">Option 3</li>
      </ul>
    </div>
    <div @contextmenu.prevent="showContextMenu($event)" style="height: 500px; background-color: #f1f1f1;">
      Right-click here to show the menu
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false,
      x: 0,
      y: 0
    };
  },
  methods: {
    showContextMenu(event) {
      event.preventDefault();
      this.x = event.clientX;
      this.y = event.clientY;
      this.showMenu = true;
    },
    handleClick(option) {
      console.log(option);
      // 在这里处理点击菜单选项的逻辑
      this.showMenu = false;
    }
  }
};
</script>

<style>
.menu {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 0;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu ul li {
  padding: 10px;
  cursor: pointer;
}

.menu ul li:hover {
  background-color: #f1f1f1;
}
</style>

这个示例中，我们使用了 `@contextmenu` 事件来监听右键点击，并通过 `event.preventDefault()` 方法阻止默认的右键菜单出现。然后，我们根据点击位置动态设置菜单的显示位置，并通过 `v-if` 控制菜单的显示和隐藏。

菜单选项点击后会触发 `handleClick` 方法，在这个方法中你可以处理相应的逻辑代码。

请注意，这只是一个简单的示例，你可以根据自己的需求进行扩展和样式调整。希望对你有所帮助！