vue2使用v-contextmenu右键菜单组件，小白教程

效果图展示：

1.下载安装：

npm install v-contextmenu --save-dev
npm install --save vue-runtime-helpers

2.在man.js中引入

import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'

Vue.use(contentmenu)  // 全局挂载

3.右键菜单组件封装：

<!-- 右键菜单 -->
<template>
  <div>
    <v-contextmenu ref="contextmenu" class="rightClickMenu">
      <v-contextmenu-item @click="screenBtn">{{ fullscreen ? '退出全屏' : '全屏' }}</v-contextmenu-item>
      <v-contextmenu-submenu icon="el-icon-full-screen" title="剖面视图(z轴侧)">
        <v-contextmenu-item v-for="item in menuBar" :key="item.id" :auto-hide="false"><i class="fa fa-search" />
          <el-form ref="form" :model="form" label-width="80px">
            <el-checkbox-group v-model="form.type">
              <el-checkbox :label="item.name" name="type">{{ item.chineseName }}</el-checkbox>
            </el-checkbox-group>
          </el-form>
        </v-contextmenu-item>
      </v-contextmenu-submenu>
      <v-contextmenu-submenu title="仿真模型视角">
        <el-scrollbar ref="scroll" class="scrollbar-wrapper" wrap-style="overflow-x:hidden;">
          <v-contextmenu-item v-for="item in cameraOption" :key="item.value" :auto-hide="false"><i class="fa fa-search" />
            <el-form ref="form" :model="form" label-width="80px">
              <el-radio-group v-model="form.visualAngle" text-color="#333">
                <el-radio :label="item.value" @change="viewpointSwitching">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form>
          </v-contextmenu-item>
        </el-scrollbar>
      </v-contextmenu-submenu>
      <v-contextmenu-submenu title="数字仿真">
        <v-contextmenu-item v-for="item in digitalSimulation" :key="item.value" :auto-hide="false"><i class="fa fa-search" />
          <el-form ref="form" :model="form" label-width="80px">
            <el-checkbox-group v-model="form.dataSimulation" class="digitalSimulation">
              <el-checkbox :label="item.label" :checked="item.showAndHide">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form>
        </v-contextmenu-item>
      </v-contextmenu-submenu>
    </v-contextmenu>
    <div v-contextmenu:contextmenu>
      <slot />
    </div>
  </div>
</template>

样式自定义

<style lang="scss" scoped>
.scrollbar-wrapper {
  width: 160px;
  height: 300px;
}

.el-scrollbar {
  background-color: #ffffff;
  color: #333;
}

//  右键菜单
.rightClickMenu {
  width: 200px;
  padding: 15px;
  box-sizing: border-box;

  .v-contextmenu-item {
    border-bottom: 1px solid #bebdbd;
    margin-top: 10px;
  }

  .el-radio-group {
    height: 30px;

    .el-radio {
      color: #333;
    }

    /deep/ .el-radio__input.is-checked+.el-radio__label {
      color: #2E2E2E !important;
    }
  }

  .el-form-item__content {
    .el-checkbox-group {
      display: flex;
      margin-left: -70px;
      flex-wrap: wrap;

      .el-checkbox {
        width: 180px;
      }
    }
  }

  .digitalSimulation{
    display: flex;
      flex-wrap: wrap;

      .el-checkbox {
        width: 180px;
      }
  }
}
</style>

4.在其他组件使用

引入右键菜单组件

import RightClickMenu from '../../components/RightClickMenu/index.vue' // 右键菜单

使用插槽

<template>
  <RightClickMenu :value="modelInfoArr" @childEvent="parentMethod" @viewpointSwitching="changeCamera">
    <div id="indDiv">
     .....
    </div>
  </RightClickMenu>
</template>

注意右键组件是最高层级页面，封装使用需要用到插槽！