前言

花了點(diǎn)時間利用廣度與深度優(yōu)先搜索算法實現(xiàn)了一個文件選擇插件，支持無限層次的文件夾嵌套，已開源并打包上傳到了npm。

本文將跟大家分享一下這個插件，歡迎各位感興趣的開發(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";
  // 組件的樣式文件，可以在項目的業(yè)務(wù)代碼內(nèi)導(dǎo)入，也可以在項目的入口文件導(dǎo)入
  import "file-folder-selector/dist/style.css";
</script>

在template中使用即可。

<template>
  <file-select />
</template>

完成上述步驟后，啟動項目即可看到如下所示的效果??

參數(shù)說明

插件接收5個可選參數(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ù)組中的每一項類型就為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個回調(diào)函數(shù)：

• getSelectedFile 獲取已選擇的文件，它有1個參數(shù)selectedArray，它值為array類型，數(shù)組中的每一項類型為：{title: string; id: string; type: string }

具體的使用方法可以參考源碼中的 file-select-test.vue 文件。

以上就是JS實現(xiàn)一個文件選擇組件詳解的詳細(xì)內(nèi)容，更多關(guān)于JS文件選擇組件的資料請關(guān)注腳本之家其它相關(guān)文章！