【sgContextMenu_v2】自定义组件：基于elementUI自定义右键菜单、右击菜单升级版，支持无限极子菜单，可以自定义菜单按钮图标样式等，自认为这次的封装很到位，个人强烈推荐直接复制使用。

以下是一个基于Vue和Element UI的自定义右键菜单组件的简化示例：

<template>
  <div id="right-click-menu" v-show="visible" :style="position">
    <el-button
      type="text"
      size="small"
      @click="handleClick(item)"
      v-for="(item, index) in menuItems"
      :key="index">
      {{ item.label }}
    </el-button>
  </div>
</template>
 
<script>
export default {
  name: 'RightClickMenu',
  props: {
    menuItems: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      position: {
        top: '0px',
        left: '0px'
      }
    };
  },
  methods: {
    handleClick(item) {
      this.$emit('menu-item-click', item);
    },
    showMenu(event, items) {
      this.menuItems = items;
      this.position.left = `${event.clientX}px`;
      this.position.top = `${event.clientY}px`;
      this.visible = true;
    },
    hideMenu() {
      this.visible = false;
    }
  },
  mounted() {
    document.addEventListener('click', this.hideMenu);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.hideMenu);
  }
};
</script>
 
<style scoped>
#right-click-menu {
  position: absolute;
  background-color: #fff;
  border-radius: 4px;
  padding: 5px 0;
  z-index: 9999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>

使用方法：

1. 在父组件中引入RightClickMenu组件。
2. 在模板中添加RightClickMenu组件，并绑定右键事件来显示菜单。
3. 传递菜单项数组给RightClickMenu组件，它会渲染每个按钮。
4. 当用户点击菜单项时，会触发menu-item-click事件，并传递选中的项。

<template>
  <div @contextmenu.prevent="openMenu($event)">
    <!-- 其他内容 -->
    <right-click-menu ref="rightClickMenu" @menu-item-click="handleMenuItemClick" />
  </div>
</template>
 
<script>
import RightClickMenu from './RightClickMenu.vue';
 
export default {
  components: {
    RightClickMenu
  },
  methods: {
    openMenu(event) {
      const menuItems = [
        { label: '操作一', value: 'one' },
        { label: '操作二', value: 'two' }
      ];
      this.$refs.rightClickMenu.showMenu(event, menuItems);
    },
    handleMenuItemClick(item) {
      // 处理菜单项点击事件
    }
  }
};
</script>

在这个示例中，我们创建了一个可复用的右键菜单组件，并展示了如何在父组件中引用它。通过监听\`co