面包屑-文件夹

本文主要是介绍面包屑-文件夹，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.需求：

类似于百度网盘、阿里云盘的云文件夹管理功能
在这里插入图片描述

2.问题点

1.页面刷新导致面包屑子级未持久化

2.浏览器的前进、后退；面包屑未能跳转到指定子级

3.数据不同步问题

3.解决方法

1.后端提供根据 id 查询面包屑 text 的 api【这里并没有提供】

2.建立自己的 map 库，并自行进行对比选择

3.监听浏览器前进后退

《思路灵感》

当时一直没有很好的思路，周末在刷手机的时候，看到有一名up主在玩“红警”；他说：“我们前期先用狗子进行地图的探索”……

💡 那我们也可以让用户建立自己的 map

【url 说明】

http://localhost:8080/#/cloud/myf 【根路径】

http://localhost:8080/#/cloud/myf?id=1782957532607504385&path=0,1782957532607504385【非跟路径，文件夹id 为 1782957532607504385 的目录下；path 路径为 0<根路径>,1782957532607504385<文件夹>】

核心代码

监听浏览器是否点击了前进或后退

【其中 getFileList 是选择性加载 table 中的数据，比如判断是根路径<默认加载第一页数据>；子路径<根据id查询子数据第一页数据> 等】

window.addEventListener("popstate", async function (evt) {await getFileList()await checkRouter()
}, false);

这里只展示 checkRouter 的核心对比方法【详细参数说明参考方法下面】

/*** 面包屑核心对比 过程*/
const checkRouter = async () => {const pathTemplateDb = sessionStorage.getItem("pathTemplateDb")if (pathTemplateDb) {const pathTemplateDbObj = await JSON.parse(pathTemplateDb);const path = route.query.path ? route.query.path.split(',') : "0"const targetArray = []if (path === "0") {targetArray.push({path: "0", text: "全部文件", tag: "0"})} else {for (let i = 0; i < pathTemplateDbObj.length; i++) {for (let j = 0; j < path.length; j++)if (pathTemplateDbObj[i].tag === path[j]) {targetArray.push(pathTemplateDbObj[i])}}}pathArray.value = targetArray;sessionStorage.setItem('pathArray', JSON.stringify(pathArray.value))}
}

【说明 1 】pathArray 是记录要显示的面包屑的实时路径数组

<el-breadcrumb separator="/"><el-breadcrumb-item v-for="(item, index) in pathArray" :key="item.path"@click.native.stop="handleClick(item, index)"><spanstyle="cursor: pointer">{{ item.text }}</span></el-breadcrumb-item>
</el-breadcrumb>

// 面包屑
const pathArray = ref([{path: '0', text: '全部文件', tag: "0"}
])

【说明 2】handleClick 是点击面包屑实现路径的切换

核心代码

const handleClick = throttle(async (item, index) => {...const targetIndex = findIndexWithTag(pathArray.value, item.tag);if (item.tag !== "0") {// 子路由await router.push({path: route.path, query: {id: item.tag, path: item.path}})} else {// 根路由await router.push({path: route.path})}pathArray.value = pathArray.value.slice(targetIndex, targetIndex + 1)...
})// 寻找到 用户点击的 面包屑的值的索引值，并且后面的子路径都不要了
function findIndexWithTag(jsonData, flag) {for (var i = 0; i < jsonData.length; i++) {if (jsonData[i].tag === flag) {return i;}}return -1;
}

【说明 3】enterDirectory 是用户点击文件夹进入文件夹的操作【这里其实就是 “狗子” 建立map 的过程 pathTemplateDb 就是用户自己的 map】

// 自己构建的 map 
const pathTemplateDb = ref([{path: '0', text: '全部文件', tag: "0"}
])const enterDirectory = throttle(async (row) => {...// 是文件夹const filterTagsArray = pathArray.value.map(item => item.tag)const targetPath = [...filterTagsArray, row.id].join(',')tempRouter.value = targetPath;pathArray.value.push({path: targetPath, text: row.fileName, tag: row.id})const target = JSON.parse(sessionStorage.getItem('pathTemplateDb')) || [{path: '0', text: '全部文件', tag: "0"}]//当用户首次进入文件夹的时候建立 map 《防止其中有重复的内容》if (!target.filter(_ => _.tag === row.id).length >= 1) {pathTemplateDb.value = [...target, {path: targetPath,text: row.fileName,tag: row.id}]sessionStorage.setItem('pathTemplateDb', JSON.stringify(pathTemplateDb.value))}// 数据持久化sessionStorage.setItem('pathArray', JSON.stringify(pathArray.value))...
})