文件右键菜单位置修复

src/views/main_web/workspace/components/file-item.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <el-tooltip
+    <el-tooltip 
       :content="file.strToolTip"
       :disabled="!file.strToolTip"
       placement="right"
       effect="light"
     >
-      <div class="yiyun_wenjian_list">
+      <div class="yiyun_wenjian_list"  @contextmenu.prevent.stop="fileRightBtnClick">
         <div>
           <!-- 非图片文件图标 -->
           <div
@@ -15,14 +15,12 @@
             :class="`${file.extension}-mid ${
               fileIsLoading || (isInWorkFolder && otherUserIsWorking) || showDownloadMask ? 'toumin' : ''
             }`"
-            @contextmenu.prevent.stop="fileRightBtnClick"
           />
           <!-- 图片文件图标 -->
           <div
             v-else
             class="defultImage-mid img_bg-mid"
             :class=" fileIsLoading || (isInWorkFolder && otherUserIsWorking) || showDownloadMask  ? 'toumin' : ''"
-            @contextmenu.prevent.stop="fileRightBtnClick"
           >
             <div class="file_Im gbox-mid">
               <img v-lazy="file.alias" alt class="file_Img" />
@@ -41,7 +39,6 @@
             <!-- 如果不在工作中 且上一次的修改者不是自己说明文件已经被更新 本地需要下载 -->
             <!-- 待下载 状态蒙板 -->
             <div
-              @contextmenu.prevent.stop="fileRightBtnClick($event), rightShowMenu($event, file, 1)"
               class="downloadIcon"
               @click="clientDownLoad(file, 1)"
               v-if="showDownloadMask"
@@ -63,7 +60,6 @@
             </div>
             <!-- 上传中 状态蒙板 todo: 调整样式-->
             <div
-              @contextmenu.prevent.stop="fileRightBtnClick($event), rightShowMenu($event, file, 1)"
               class="downloadIcon"
               v-if="loadingState.type === UPLOADING"
             >
@@ -231,8 +227,16 @@ export default {
     loadingState: {
       type: Object,
       default: () => ({}),
+    },
+    tempRightFileId: {
+      type: String,
+      default: ''
     }
   },
+  mounted() {
+    this.downLoadIconHeight = document.querySelector('.downloadIcon').offsetHeight;
+    this.domFileName = document.querySelector('.yiyunwenjian_name');
+  },
   data() {
     return {
       isClient: system.isClient,
@@ -244,6 +248,8 @@ export default {
       isFileRightMenuVisible: false,//控制文件右键菜单显示与隐藏
       fileRightMenuLeft: 0,//文件右键菜单位置
       fileRightMenuTop: 0,
+      downLoadIconHeight: 0,
+      domFileName: null,
     };
   },
   computed: {
@@ -300,7 +306,12 @@ export default {
     fileRightBtnClick(e) {
       this.isFileRightMenuVisible = true;
       this.fileRightMenuLeft = e.offsetX;
-      this.fileRightMenuTop = e.offsetY;
+      if(e.target === this.domFileName) {
+        this.fileRightMenuTop = e.offsetY + this.downLoadIconHeight;
+      } else {
+        this.fileRightMenuTop = e.offsetY
+      }
+      this.$emit('oneFileRightBtnClick', this.file.id);
     },
     closeFileRightMenu() {
       this.isFileRightMenuVisible = false;
@@ -322,6 +333,9 @@ export default {
         document.body.removeEventListener("click", this.closeFileRightMenu);
       }
     },
+    tempRightFileId(val) {
+      this.isFileRightMenuVisible = (val === this.file.id);
+    }
   }
 };
 </script>

src/views/main_web/workspace/workspace.new.vue

@@ -100,6 +100,8 @@
                       @dblclick.native="fileClick(file)"
                       @openfileBtnClick="fileClick(file)"
                       @copyFileBtnClick="copyWorkFileBtnClick(file)"
+                      @oneFileRightBtnClick="oneFileRightBtnClick"
+                      :tempRightFileId="tempRightFileId"
                       :localFileHashMap="localFileHashMap"
                       :loadingState="localFileLoadStateMap[file.id]"
                     />
@@ -369,6 +371,8 @@ export default {
        * }
        */
       localFileLoadStateMap: {},
+
+      tempRightFileId: "", // 存储点击了右键菜单的id
     };
   },
   mounted: function () {
@@ -405,6 +409,10 @@ export default {
     }
   },
   methods: {
+    // 接收到了一个文件的右键菜单点击事件
+    oneFileRightBtnClick(id) {
+      this.tempRightFileId = id;
+    },
     removeMilestone(filesList){
       return filesList.filter(file=>{
         return file.milestone != 2;
@@ -1068,7 +1076,7 @@ export default {
       copyFile.modifyTime = new Date();
       copyFile.createUserId = sessionStorage.userId;
       copyFile.createTime = new Date();
-      console.log(copyFile);
+      // console.log(copyFile);
 
       const addFileRes = await services.addFile(copyFile);
       this.fetchFolderFiles();