修改添加质控 右键-添加

src/views/recordsRoom/qc/caseViews.vue

@@ -38,7 +38,7 @@
           </li>
         </ul>
       </div>
-      <div class="cont-left-file" @mouseup.prevent="handleMouseupHandle" @contextmenu.prevent="handelContextmenu">
+      <div class="cont-left-file" @mouseup.prevent="handleMouseupHandle" @contextmenu.prevent="openMenu($event)">
         <div v-if="is_active == 0">
           <mainHomePage ref="main" :data="mainHomeData" :if-file="ifFile" />
         </div>
@@ -113,6 +113,14 @@
       </template>
       <!-- 添加质控结果 -->
       <CreateControlResultDialogVue v-if="dialogData.bSwitch" :data="dialogData" @refresh="handelRefreshResults" />
+      <!-- 右键菜单 -->
+      <ul
+        v-show="gridCustomizeVisible"
+        :style="{ left: left + 'px', top: top + 'px' }"
+        class="contextmenu"
+      >
+        <li @click="onCreate">添加</li>
+      </ul>
     </div>
   </div>
 </template>
@@ -219,7 +227,10 @@ export default {
         bSwitch: false,
         text: '',
         blbh: ''
-      }
+      },
+      top: 0,
+      left: 0,
+      gridCustomizeVisible: false
     }
   },
   computed: {
@@ -264,7 +275,17 @@ export default {
       return title
     }
   },
-  watch: {},
+  watch: {
+    //变量名
+    gridCustomizeVisible(val) {
+      if (val) {
+        //点击事件，调用方法
+        document.body.addEventListener("click", this.closeMenu);
+      } else {
+        document.body.removeEventListener("click", this.closeMenu);
+      }
+    },
+  },
   mounted() {
     this.valData = localStorage.getItem('getData')
     if (this.valData) {
@@ -280,11 +301,26 @@ export default {
       this.getCaseQualityResults()
     },
     // 鼠标右击事件
-    handelContextmenu() {
+    openMenu(e) {
+      //获取右击时得坐标
+      var x = e.pageX;
+      var y = e.pageY;
+      //top，left在data种定义，初始值为0
+      //top，left是右键菜单得坐标值，可以通过运算调整
+      this.top = y - 80;
+      this.left = x - 200;
+      
       if (this.dialogData.text) {
-        this.dialogData.bSwitch = true
+        this.gridCustomizeVisible = true;
       }
     },
+    closeMenu() {
+      this.gridCustomizeVisible = false;
+    },
+    // 鼠标右击事件
+    onCreate() {
+      this.dialogData.bSwitch = true
+    },
     // 鼠标事件
     handleMouseupHandle() {
       const text = window.getSelection().toString()
@@ -642,4 +678,29 @@ export default {
   color: #ff0000;
   cursor: pointer;
 }
+
+/* 右键菜单 */
+.contextmenu {
+  margin: 0;
+  background: #fff;
+  z-index: 3000;
+  position: absolute;
+  list-style-type: none;
+  padding: 5px 0;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #333;
+  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+}
+ 
+.contextmenu li {
+  margin: 0;
+  padding: 7px 16px;
+  cursor: pointer;
+}
+ 
+.contextmenu li:hover {
+  background: #eee;
+}
 </style>