前端vue3手写一个目录操作上一级，下一级，选择路径功能

功能虽然很简单，但是刚开始做的时候没有思路，所以记录一下，技术很菜，但是希望能给有需要的人一些启发。

一.实现思路与效果图

1. 接口先获取更目录所有目录list
2. 点击目录下的链接则拼接url发起请求，进入下一个目录
3.用面包屑el-breadcrumb显示路径(dir数组)，内容显示该路径下目录列表（dirList数组）
4. 上一步，截取的不是倒数最后一个路径则拼接，发起请求返回上一个目录
下一步，则添加一个数组，上一步则删除

后端返回的结构(isDirectory判断是否是文件)

 效果图:

二.实现具体过程

1.定义两个数组，一个储存路径，一个储存路径下的目录，然后v-for渲染

const dir = ref(["d:/"])//定义一个数组，存储路径
//通过接口获取后端路径数组
const getNewPath = async () => {
  const dirRes = slicePath()
  try {
    const { data } = await fileDirlist({ dir: dirRes })
    dirList.value = data.resultArr
  } catch (error) {
    console.log("error :>> ", error)
    //如果拿到的是文件，则清空显示的文件数组，因为这里接口传文件则不返回数据
    dirList.value = []
  }
}
//处理数组
const slicePath = () => {
  let dirRes = ""
  dir.value.forEach((item) => {
    dirRes = dirRes + "/" + item
  })

  return dirRes.slice(1)
}

2.上一步，下一步操作

const previousDir = async (item, index) => {
  // 如果是最后一个元素则返回，减少网络请求
  if (index + 1 === dir.value.length) {
    return
  }
  // 删除选中元素后面的所有元素
  dir.value.splice(index + 1, dir.value.length - 1)
  await getNewPath()
}
const nextDir = async (item) => {
  dir.value.push(item)
  await getNewPath()
}

3.html代码

 <template #content>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <el-breadcrumb separator="\">
                  <el-breadcrumb-item v-for="(item, index) in dir" :key="item" @click="previousDir(item, index)"
                    ><a>{{ item }}</a></el-breadcrumb-item
                  >
                </el-breadcrumb>
              </div>
            </template>
            <div v-for="item in dirList" :key="item" class="text item" @click="nextDir(item.name)">
              <a style="cursor: pointer">{{ item.name }}</a>
            </div>
          </el-card>
        </template>

4.css代码

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.box-card {
  width: 100%;
  height: 100%;
  overflow: auto;
}