鸿枫网盘,文件夹面包屑跳转实现功能

  1. 新增功能,磁盘格式化,层级面包屑跳转,视频预览优化

  2. 主要记录一下面包屑的实现思路

    2.1 面包屑渲染

    复制代码
        <el-breadcrumb separator-class="el-icon-arrow-right">      <el-breadcrumb-item>        <el-link :underline="false" @click="skipCrumbs(0)">根目录</el-link>      </el-breadcrumb-item>​        <el-breadcrumb-item v-for="(item,index) in crumbsList":key="index">          <el-link :underline="false" @click="skipCrumbs(item.id)">{{item.name}}</el-link>        </el-breadcrumb-item>    </el-breadcrumb>    
复制代码
   定义vue dataallCrumbsList: [],crumbsList: [],

js 代码​
4.

复制代码
       checkboxOndblclick(disk) {      console.log(disk);      if (disk.isDir===1) {        this.queryParams.parentId = disk.id;        const skip = {          id: disk.id,          parentId: disk.parentId,          name: disk.name        }        this.allCrumbsList.push(skip);        this.allCrumbsList = this.uniqueObjects(this.allCrumbsList);        this.crumbsList=[];        this.generateCrumbs(disk.id);        this.skipList.push(disk.id);        this.skipList = [...new Set(this.skipList)];        this.uploadFileUrl = process.env.VUE_APP_BASE_API + "/disk/file/upload/"+disk.id        this.getList();      }    },    handleSkip(skip) {      if(skip===0) {        let index = this.skipList.indexOf(this.queryParams.parentId);        this.skip(index-1)      }else {        let index = this.skipList.indexOf(this.queryParams.parentId);        this.skip(index+1)      }    },    skip(nextIndex) {      this.crumbsList=[];      if (nextIndex<0) {          this.queryParams.parentId=0;          this.allCrumbsList=[];          this.getList();      }else if (nextIndex>=this.skipList.length) {        this.queryParams.parentId =0;        this.allCrumbsList=[];        this.getList();      } else {        this.queryParams.parentId = this.skipList[nextIndex];        this.generateCrumbs(this.queryParams.parentId);        this.getList();      }    }, uniqueObjects(arr) {      const unique = [];      const seen = new Set();      arr.forEach(item => {        const stringifiedItem = JSON.stringify(item);        if (!seen.has(stringifiedItem)) {          unique.push(item);          seen.add(stringifiedItem);        }      });      return unique;    },    generateCrumbs(id) {      if (id===0) {        this.crumbsList = this.crumbsList.reverse();        return;      }      const crumbs = this.getCrumbsListById(id);      if (crumbs!=null&&crumbs!=undefined) {        this.crumbsList.push(crumbs);        this.generateCrumbs(crumbs.parentId);      }    },    getCrumbsListById(id) {      return this.allCrumbsList.find(item => {        return item.id === id;      });    },    skipCrumbs(id) {      this.queryParams.parentId = id;      this.crumbsList = [];      this.generateCrumbs(this.queryParams.parentId);      this.getList();    },

体验地址 鸿枫网盘

相关推荐
慈云数据35 分钟前
从开发到上线:基于 Linux 云服务器的前后端分离项目部署实践(Vue + Node.js)
linux·服务器·vue.js
记得早睡~5 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
小小鸭程序员6 小时前
Vue组件化开发深度解析:Element UI与Ant Design Vue对比实践
java·vue.js·spring·ui·elementui
拉不动的猪7 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya7 小时前
react redux的学习,单个reducer
前端·javascript·react.js
陌路物是人非7 小时前
SpringBoot + Netty + Vue + WebSocket实现在线聊天
vue.js·spring boot·websocket·netty
拉不动的猪7 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
加瓦点灯7 小时前
观察者模式:解耦对象间的依赖关系
开发语言·javascript·观察者模式
z_mazin8 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan9 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单