Vue文件目录树形组件

<template>
  <div class="tree-dir-box">
    <ul>
      <!--本层的目录名称的显示由上一层的props:disabled决定-->
      <div class="dir-name-box" @click="click" :class="[{overflow:disabled},{linestate:disabled},{block:!disabled}]">
        <img src="../assets/file-icon.png" alt="" :style='{"margin-left":`${level*40}px`}'>
        <p >{{dirData.directoryName}}</p>
      </div>
      <li v-for="item in dirData.directories" :key="item.directoryName" >
        <!--递归组件，传入overflow属性-->
        <treeDir :level="nextLevel" :dirData="item" :disabled="overflow"/>
      </li>
      <li v-for="item in dirData.files" :key="item">
        <!--本层的文件名称由本层的overflow属性决定是否显示-->
        <div class="dir-name-box" :class="[{overflow:overflow},{linestate:overflow},{block:!overflow}]">
          <p :style='{"padding-left":`${nextLevel*40}px`}'>{{item}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name:'treeDir',
  data(){
    return{
      overflow:true,
      dir:{}
    }
  },
  props:{
    dirData:{
      type:Object,
      default:{},
    },
    level:{
      typr:Number,
      default:1
    },
    disabled:{
      type:Boolean,
      default:false
    }
  },
  computed:{
    nextLevel(){
      return this.level+1;
    },
  },
  watch:{//trueoverflowtrue
    disabled(val,oldval){
      if(val === true){
        this.overflow = true;
      }
    }
  },
  methods:{
    click(e){
      this.overflow = !this.overflow
    }
  },
  mounted(){
    
  }
}
</script>

<style scoped>
  ul{
    list-style: none;
    overflow: hidden;
    padding: 0;
  }
  .dir-name-box{
    width: 100%;
    height: 24px;
    border-bottom: solid 0.5px #ccc;
  }
  .block{
    width: 100%;
    transition: height 0.3s;
    overflow: hidden;
  }
  p{
    float: left;
    font-size: 14px;
    display: block;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tree-dir-box{
    width: 600px;
  }
  .overflow{
    height: 0px;
    overflow: hidden;
    transition: height 0.3s;
  }
  img{
    float: left;
    height: 20px;
    width: 20px;
  }
  .linestate{
    border-bottom: 0px;
  }
</style>