File Tree 组件

FileTree 由三个组件组成：

• FileTree：根容器。
• FileTreeFolder：目录节点。
• FileTreeFile：文件节点。

默认已为常见代码文件、办公文件、图片音视频文件配置图标，也支持自定义图标。

基础用法

• src

  • components

    • LinkCard.vue
    • Tabs.vue
    • Accordion.vue
  • assets

    • cover.png
    • intro.mp4
  • README.md
• 设计评审.docx
• 排期.xlsx
• 宣讲.pptx

<FileTree>
  <FileTreeFolder name="src" :default-open="true">
    <FileTreeFolder name="components" :default-open="true">
      <FileTreeFile name="LinkCard.vue" />
      <FileTreeFile name="Tabs.vue" />
    </FileTreeFolder>
    <FileTreeFile name="README.md" />
  </FileTreeFolder>
</FileTree>

自定义图标

• reports

  • custom-node.dat

Props

FileTree

参数	类型	默认值	说明	示例
label	string	File tree	role=tree 的可访问标签。	label="项目目录"

FileTreeFolder

参数	类型	默认值	说明	示例
name	string	-	目录名（必填）。	name="src"
icon	string	''	目录图标（同时作为开关默认图标）。	icon="mdi:folder-star-outline"
openIcon	string	''	展开态图标。	open-icon="mdi:folder-open-outline"
closedIcon	string	''	折叠态图标。	closed-icon="mdi:folder-outline"
href	string	''	文件夹名后方显示跳转图标，点击跳转（与展开操作分离）。	href="/resource/project-components.html"
target	string	''	链接打开方式。	target="_blank"
defaultOpen	boolean	true	初始是否展开。	:default-open="false"

FileTreeFile

参数	类型	默认值	说明	示例
name	string	-	文件名（必填）。	name="README.md"
icon	string	''	自定义文件图标。	icon="mdi:file-star-outline"
href	string	''	文件名后方显示跳转图标。	href="/guides/index.html"
target	string	''	链接打开方式。	target="_blank"