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" />

最主要的思路就是利用递归的方式层层展示文件目录结构。