一、前言
开源UI库对于常用的前端控件已经实现的非常好了，比如前面一章介绍的Element-Plus开源库的使用。
但对于一些特殊的、不那么通用的组件，一般开源库都不会提供相应的实现，此时就需要我们自己封装了。
比如文本要介绍的“目录树组件”，在开源库中就很少有实现的，而其在一些需要显示文件目录的地方又确实很有用。
所以本文就带大家来看看一个目录树的实现逻辑。
二、思路
写代码前思路很重要，目录树大家应该都很熟悉，比如windows系统上的文件资源管理器中，就有很多目录，只不过它的目录结构并不允许多个层次的文件同时出现。
所以这里我以vscode中目录树为基准：
它就可以很好的将不同目录下的文件全部展示到一个控件中去。
而我们的目的就是用vue实现出这样一个目录结构，经过前面的我的摸索，大概可以将目录树分为两个结构：
DirNode：目录节点。
目录树最外层肯定是一个目录，也就是这里的DirNode，每个目录里面只有两个东西：目录、文件，其中文件可以直接展示，而子目录则继续使用DirNode表示，这样就完成了无限递归嵌套的任务，无论你有多少层，都可以用DirNode表示出来。
FileTree：目录树
这个结构主要是用来整理上面的DirNode样式的，比如我们一般需要设置目录的最大高度，如果超出了这个高度就需要显示滑动条。
三、代码实现
有了思路，我们就可以开始来写代码了，根据前面的思路，这里就将其分开作为两个组件进行实现。
1.DirNode
首先是我们的重头戏DirNode组件，它代表了一个目录结构，并且包含直接子文件、子目录。
首先是html结构：
主要分为两部分：
title：用于显示当前目录的名字、图标，并监视其点击事件，用于展开、关闭目录children：该目录的所有直接子文件、子目录，通过变量is_open来确定当前是否需要展示
首先是title部分：
