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

5 篇文章 1 订阅

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

一.实现思路与效果图

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;
}

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值