zip文件树形结构数据组件封装（vue）

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

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