使用vuejs实现一个右键菜单的组件并给出代码

以下是一个简单的右键菜单组件的示例代码：

<template>
  <div class="context-menu" :style="{top: y + 'px', left: x + 'px'}" v-if="show">
    <ul>
      <li v-for="(item, index) in items" :key="index" @click="clickHandler(item)">
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    x: Number,
    y: Number,
    items: Array,
    show: Boolean,
  },
  methods: {
    clickHandler(item) {
      item.action();
      this.$emit('hide');
    },
  },
};
</script>

<style scoped>
.context-menu {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  padding: 0.5rem 0;
}

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

li {
  padding: 0.5rem;
  cursor: pointer;
}

li:hover {
  background-color: #eee;
}
</style>

这个组件可以接收一些属性：

• x和y：表示右键菜单应该显示的位置。
• items：表示菜单项的数组，每个菜单项应包含一个label属性和一个action方法。
• show：表示右键菜单是否应该显示。

当用户点击菜单项时，该菜单项的action方法将被调用，并触发一个名为hide的事件，以便父组件可以隐藏右键菜单。