zip文件树形结构数据组件封装(vue)
项目中需要实现各种文件的预览,其中包括zip文件的预览。本文主要是针对zip文件在后端解压后返回树形结构的数据给前端展示目录结构。
具体效果如下:
将后端返回的string数据转为json结构如下:
其中title字段为文件或文件夹名称,treeType为FILE表示为文件夹(可点击打开下一层),treeType为DIR表示为文件(可点击进行查看)。
fileTree = [{
"title": "哈哈哈test",
"treeType": "FILE",
"staticFileUrl": "/app/static/view/20200903/0fc25476-6bcb-4379-a817-c756168cd8e5",
"isView": null,
"selectable": null,
"children": [{
"title": "鍝堝搱鍝坱est",
"treeType": "FILE",
"staticFileUrl": null,
"isView": null,
"selectable": null,
"children": [{
"title": "kkk",
"treeType": "FILE",
"staticFileUrl": null,
"isView": null,
"selectable": null,
"children": [{
"title": "婊存淮鐢靛瓙鍙戠エB.pdf",
"treeType": "DIR",
"staticFileUrl": "/view/2020/09/03/0293765f-ac0c-47bb-b2ce-5a2be8841a4e.pdf",
"isView": true,
"selectable": true,
"children": []
}]
}, {
"title": "婊存淮鍑鸿琛岀▼鎶ラ攢鍗旴.pdf",
"treeType": "DIR",
"staticFileUrl": "/view/2020/09/03/ec80331d-0917-4a0d-b4d1-6f56d2ad7d68.pdf",
"isView": true,
"selectable": true,
"children": []
}, {
"title": ".DS_Store",
"treeType": "DIR",
"staticFileUrl": null,
"isView": false,
"selectable": false,
"children": []
}, {
"title": "婊存淮鐢靛瓙鍙戠エA.pdf",
"treeType": "DIR",
"staticFileUrl": "/view/2020/09/03/ba01ee46-aeb3-4324-8f3f-3fb2fc69c651.pdf",
"isView": true,
"selectable": true,
"children": []
}]
}]
}]
html代码如下
文件目录结构组件代码如下
1.template
<template>
<div class="file-item">
<!--文件可点击进行预览操作-->
<div @click="filePriew(fileTree)" class="file-title file" v-if="fileTree.treeType==='DIR'">
<img src="@/assets/fkimg/approve/attachmentIcon/files.png" class="file-image"/>
<span class="file-text">{{fileTree.title}}</span>
</div>
<!--文件夹可点击展开-->
<div @click="isShowChild=!isShowChild" class="file-title" v-else>
<img src="@/assets/fkimg/approve/attachmentIcon/fileTree.png" class="file-image"/>
<span class="file-text">{{fileTree.title}}</span>
<img v-if="isShowChild" src="@/assets/fkimg/approve/attachmentIcon/up.png" class="file-image-right"/>
<img v-else src="@/assets/fkimg/approve/attachmentIcon/down.png" class="file-image-right"/>
</div>
<div class="padding-left" v-show="fileTree.children&&fileTree.children.length>0&&isShowChild">
<!--当前组件自己调用自己类似于递归的写法-->
<file-item
@filePriew="filePriew"
v-for="(item,index) in fileTree.children"
:key="index"
:fileTree="item"></file-item>
</div>
</div>
</template>
2.script
<script>
export default {
name: 'fileItem',//组件名称一定要写正确,以便自己调用自己
props: {
fileTree: {//文件目录结构数据
type: Object,
default: null,
},
},
data () {
return {
isShowChild: false,//是否显示下一级目录
}
},
methods: {
clear () {//用于关闭打开的文件,可供父组件调用。
this.isShowChild = false
},
filePriew (item) {//查看文件的方法
},
},
}
</script>
3.css样式
<style lang="less" scoped>
.file-item{
.file-title{
padding:6px 15px;
.file-image {
width: 35px;
height: 35px;
margin-right: 15px;
}
.file-image-right{
position:absolute;
width: 25px;
height: 25px;
right:15px;
top:6px;
}
.file-text{
font-family: PingFangSC-Medium;
font-size: 14px;
color: #333333;
letter-spacing: 0;
line-height: 35px;
}
border-bottom: 1px solid #eeeeee;
position: relative;
}
.file{
padding:6px 25px;
}
.padding-left{
padding-left:10px;
}
}
</style>
调用组件
<file-item ref="fileItemRef" @filePriew="filePriew" :fileTree="fileTree" />