实现 Vue 右键菜单组件

在前端开发中，右键菜单是一种常见的交互方式，它可以为用户提供快捷操作和更好的用户体验。本文将介绍如何使用Vue框架实现一个简单的右键菜单组件，并提供相应的源代码。

首先，我们需要创建一个Vue组件来表示右键菜单。在Vue的单文件组件中，我们可以使用template标签定义组件的模板，使用data属性来存储菜单项的数据，使用methods属性定义处理右键点击事件的方法。

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

<template>
  <div class="context-menu" v-show="showMenu">
    <ul>
      <li v-for="item in menuItems" :key="item.id" @click="handleItemClick(item)">
        {
  
  { item.label }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false, // 控制菜单的显示与隐藏
      menuItems: [ // 菜单项数据
        { id: 1, label: '菜单项1' },
        { id: 2, label: '菜单项2' },
        { id: 3, label: '