文件夹右键菜单 高级搜索logo

src/views/highSearch/HighSearch.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="logo">
       <img src="@/assets/images/Frame_427319127.png" alt="" />
-      <div class="font">Domino’s File</div>
+      <div class="font">聚合智慧文档管理系统</div>
     </div>
     <div class="search_box">
       <el-select
@@ -175,8 +175,9 @@ const setScroll = async () => {
 }
 .logo {
   margin: 8px auto;
-  width: 290px;
+  width: 500px;
   height: 80px;
+  font-weight: 900;
   //   border: 1px solid #000;
   display: flex;
   align-items: center;

src/views/myfile/MyFile.vue

@@ -132,7 +132,7 @@
                         <el-collapse v-model="folder" accordion class="collapseSell">
                             <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
                                 <el-table :data="folderList" style="width: 100%" @selection-change="handleSelectionChange1"
-                                    :single-select="true" @row-click="folderClick">
+                                    :single-select="true" @row-click="folderClick" @row-contextmenu="folderRClick">
                                     <el-table-column type="selection" width="55" />
                                     <el-table-column label="名称" width="180">
                                         <template #default="scope">
@@ -160,6 +160,21 @@
                                 </el-table>
                             </el-collapse-item>
                         </el-collapse>
+                          <!-- 右键唤出的菜单 -->
+                        <div
+                            class="right_menu"
+                            v-if="folderVisible"
+                            :style="{ left: folderleft + 'px', top: foldertop + 'px' }"
+                        >
+                            <div class="menu_item" @click="restName(null,null)">
+                            <!-- <img src="@/assets/images/textbox.png" alt="" /> -->
+                            <span>重命名</span>
+                            </div>
+                            <div class="menu_item" @click="folderClick(null,null)">
+                            <!-- <img src="@/assets/images/trash.png" alt="" /> -->
+                            <span>打开</span>
+                            </div>
+                        </div>
                     </div>
                     <!-- 文件 -->
                     <div class="fileTable">
@@ -669,6 +684,10 @@ export default {
         const showPreview = ref(false)//控制图片预览组件显示
         const previewData = ref()//需要预览的文件的数据
         const router = useRouter(); //注册路由
+        const folderVisible = ref(false); //显示文件夹右键菜单
+        const foldertop = ref(0);
+        const folderleft = ref(0);
+        const thisFolder = ref({}); //当前右键的文件夹
         // 获取用户树
         function getAllUser() {
             userTree.getUserTree({}).then(res => {
@@ -1023,6 +1042,8 @@ export default {
         }
         // 重命名
         function restName(row, index) {
+            // 判断是点击打开还是右键菜单打开
+            row = row ? row : thisFolder.value
             newName.value = row.dirName
             folderName.value = true
             selectedBox.value = row.dirId
@@ -1077,6 +1098,9 @@ export default {
         // 文件夹每行点击事件
         function folderClick(row, list) {
             // 上一级dirId就是下一级的parentId
+            // 判断是点击打开还是右键菜单打开
+            row = row ? row : thisFolder.value
+            console.log('row',row);
             newDirId.value = row.dirId
             newSpaceId.value = row.spaceId
             documents.getALLdocument({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 }).then(res => {
@@ -1242,12 +1266,34 @@ export default {
                 arr = arr.filter(item=>item.name !== "文字识别")
             }
             return arr
-        }        
+        }   
+        // 文件夹右键事件
+        const folderRClick = (row,col,e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        let thisRow = toRaw(row)
+        // console.log("row", thisRow);
+        // console.log("col", toRaw(col));
+        // console.log("e", e);
+        // console.log("item", toRaw(item));
+        thisFolder.value = thisRow;
+        //  唤出右键菜单，思路：获取鼠标位置来定位菜单
+        folderVisible.value = true;
+        foldertop.value = e.pageY;
+        folderleft.value = e.pageX;
+        };
+        // 关闭文件夹右键菜单
+        const closeRMenu = () => {
+        // console.log("close");
+        folderVisible.value = false;
+        };     
         onMounted(() => {
             getAllTop()
             getAllCollect()
             getAllUser()
             getAllCollect()
+            // 添加监听，点击其他地方关闭文件夹右键菜单
+            window.addEventListener("click", closeRMenu, true);
         })
         return {
             allBag,
@@ -1369,7 +1415,13 @@ export default {
             openForwardFile,//历史版本
             forwardTreeData,
             fileUserTreeData,
-            filterMouseCli
+            filterMouseCli,
+            folderVisible,
+            foldertop,
+            folderleft,
+            thisFolder,
+            folderRClick,
+            closeRMenu
         }
 
     },
@@ -1657,6 +1709,30 @@ p {
     margin: 0 auto;
 }
 
+.right_menu {
+  width: 100px;
+  position: absolute;
+  padding: 8px;
+  box-shadow: 0px 2px 10px 1px rgba(199, 203, 216);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #c1cce3;
+  background-color: #fff;
+  z-index: 10000;
+  .menu_item {
+    width: 100%;
+    height: 40px;
+    border-radius: 4px 4px 4px 4px;
+    display: flex;
+    align-items: center;
+    &:hover {
+      background-color: #f5f7f9;
+    }
+    span {
+      margin-left: 4px;
+    }
+  }
+}
+
 :deep(.el-tag__content) {
     display: block;
 }