在vue3中根据Element Plus组件开发右键菜单，组件复用性高，可设置自定义图标和icon！

效果展示

这个组件是基于Element Plus开发的，安装下载Element Plus组件库是前提条件！

一，html布局，是基于Popover 气泡卡片 组件+Menu 菜单 组合开发。

<!-- 右键菜单组件 -->
 <template>
  <div @contextmenu.prevent="rightClick" class="right-click-container">
    <ul v-show="rightMenu" class="rightMenu" :style="{ left: left + 'px', top: top + 'px' }">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="vertical" @select="handleSelect">
        <el-popover placement="right" ref="viewingModeRef" trigger="hover">
          <template #reference>
            <el-menu-item class="firstLevelMenu">
              <img src="../../assets/icons/viewingIcons.png" alt="">
              <span>观看模式</span>
              <el-icon>
                <ArrowRight />
              </el-icon>
            </el-menu-item>
          </template>
          <el-menu style="border-right: none;">
            <el-menu-item v-for="item in viewingMode" :key="item.id" style="height: 30px;" @click="onMenuClick(1)">{{ item.label }}</el-menu-item>
          </el-menu>
        </el-popover>
        <el-popover placement="right" ref="modelPerspectiveRef" trigger="hover">
          <template #reference>
            <el-menu-item class="firstLevelMenu">
              <img src="../../assets/icons/perspectiveIcon.png" alt="">
              <span>模型视角</span>
              <el-icon>
                <ArrowRight />
              </el-icon>
            </el-menu-item>
          </template>
          <el-menu style="border-right: none;">
            <el-menu-item v-for="item in cameraOption" :key="item.id" style="height: 30px;" @click="onMenuClick(3)">{{ item.label }}</el-menu-item>
          </el-menu>
        </el-popover>
        <el-popover placement="right" ref="sectionViewRef" trigger="hover">
          <template #reference>
            <el-menu-item class="firstLevelMenu">
              <img src="../../assets/icons/sectionIcon.png" alt="">
              <span>剖面视图</span>
              <el-icon>
                <ArrowRight />
              </el-icon>
            </el-menu-item>
          </template>
          <el-menu style="border-right: none;">
            <el-menu-item v-for="item in menuBar" :key="item.id" style="height: 30px;" @click="onMenuClick(3)">{{ item.label }}</el-menu-item>
          </el-menu>
        </el-popover>
        <el-popover placement="right" ref="digitalSimulationRef" trigger="hover">
          <template #reference>
            <el-menu-item class="firstLevelMenu">
              <img src="../../assets/icons/hideDisplayIcons.png" alt="">
              <span>数字仿真</span>
              <el-icon>
                <ArrowRight />
              </el-icon>
            </el-menu-item>
          </template>
          <el-menu style="border-right: none;">
            <el-menu-item v-for="item in digitalSimulation" :key="item.id" style="height: 30px;" @click="onMenuClick(3)">{{ item.label }}</el-menu-item>
          </el-menu>
        </el-popover>
      </el-menu>
    </ul>
    <!-- 插槽 -->
    <div>
      <slot></slot>
    </div>
  </div>
</template>

二，样式SCSS代码   

    z-index: 999; // 增加权重 不然没有hover效果

<style lang='scss' scoped>
.rightMenu {
  width: 200px;
  background-color: #ffffff;
  box-shadow: 2px 2px 4px rgba(194, 193, 193, 0.3);
  border: 0.5px solid #bbbebe;
  border-radius: 7px;
  position: absolute;
  padding: 6px 0;
  z-index: 999; // 增加权重 不然没有hover效果
  .el-menu-demo {
    background-color: #ffffff;
  }
  // 一级菜单
  .firstLevelMenu {
    display: flex;
    align-items: center;
    img {
      margin-right: 10px;
    }
    .el-icon {
      margin-left: 70px;
    }
  }
  .el-popover {
    width: 180px;
  }
  .el-menu-item {
    height: 40px;
  }
}
</style>

三.最重要的是JS方法，分别写了鼠标右键方法，右键组件打开/关闭功能，二级菜单点击方法。

const rightMenu = ref(false); // 右键菜单显隐
const left = ref(0); // 鼠标位置
const top = ref(0); // 鼠标位置
const viewingModeRef = ref(); // 观看模式节点
const modelPerspectiveRef = ref(); // 模型视角节点
const sectionViewRef = ref(); // 剖面视图节点
const digitalSimulationRef = ref(); // 数字仿真节点

// 生命周期
onMounted(() => {
  rightMouseButton();
});


// 鼠标右键
const rightMouseButton = () => {
  window.addEventListener("click", handleScroll); // 鼠标右键点击
  window.addEventListener("contextmenu", handleScroll);
  window.addEventListener("mousewheel", handleScroll);
  window.addEventListener("click", handleClick); // 鼠标左键点击
};

const handleScroll = () => {
  rightMenu.value = true;
};

const handleClick = () => {
  rightMenu.value = false;
};

// 鼠标右键点击
const rightClick = (e) => {
  e.preventDefault(); // 阻止浏览器默认右键菜单
  left.value = e.clientX;
  top.value = e.clientY;
  rightMenu.value = true;
};

// 点击菜单项触发
const onMenuClick = (index) => {
  // 背景样式
};

当样式在气泡框时 关闭的方法：

可以通过绑定弹出框的ref，来通过ref的value.hide()实现手动隐藏！