讓我們一起實(shí)現(xiàn)一個(gè)文件選擇組件
前言
花了點(diǎn)時(shí)間利用廣度與深度優(yōu)先搜索算法實(shí)現(xiàn)了一個(gè)文件選擇插件,支持無(wú)限層次的文件夾嵌套,已開源并打包上傳到了npm。
本文將跟大家分享一下這個(gè)插件,歡迎各位感興趣的開發(fā)者閱讀本文。
插件安裝
yarn add file-folder-selector
# or
npm install file-folder-selector --save
插件使用
在你需要使用此插件的業(yè)務(wù)代碼中導(dǎo)入插件。
<script setup lang="ts">
import { FileSelect } from "file-folder-selector";
// 組件的樣式文件,可以在項(xiàng)目的業(yè)務(wù)代碼內(nèi)導(dǎo)入,也可以在項(xiàng)目的入口文件導(dǎo)入
import "file-folder-selector/dist/style.css";
</script>
在template中使用即可。
<template>
<file-select />
</template>
完成上述步驟后,啟動(dòng)項(xiàng)目即可看到如下所示的效果。

效果圖
參數(shù)說(shuō)明
插件接收5個(gè)可選參數(shù):
- fileData 文件樹結(jié)構(gòu)數(shù)據(jù)
title 文件名, 值為string類型
id 文件id, 值為string類型
type 文件類型, 值為"file"或"folder"
imgSrc 文件圖片地址(可選參數(shù)),值為string類型
childData 子文件數(shù)據(jù)(可選參數(shù)),值為array類型,如果type為"folder",則傳此參數(shù),數(shù)組中的每一項(xiàng)類型就為fileData的類型。
- defaultFolderImage 默認(rèn)的文件夾圖標(biāo),值為string類型
- defaultFileImage 默認(rèn)的文件圖標(biāo),值為string類型
- defaultSearchImage 默認(rèn)的搜索圖標(biāo),值為string類型
- defaultFolderPathImage 默認(rèn)的文件夾路徑圖標(biāo),值為string類型
注意:插件默認(rèn)的圖標(biāo)更換不支持svg格式的圖片,插件的fileData參數(shù)可參考源碼中的FileConfig.json文件。
插件提供了1個(gè)回調(diào)函數(shù):
- getSelectedFile 獲取已選擇的文件,它有1個(gè)參數(shù)selectedArray,它值為array?類型,數(shù)組中的每一項(xiàng)類型為:{title: string; id: string; type: string }
具體的使用方法可以參考源碼中的 file-select-test.vue 文件。



























