JS實(shí)現(xiàn)一個(gè)文件選擇組件詳解

更新時(shí)間：2022年09月26日 10:25:37 作者：神奇的程序員

這篇文章主要為大家介紹了JS實(shí)現(xiàn)一個(gè)文件選擇組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

花了點(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 文件。

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

您可能感興趣的文章:

相關(guān)文章

JavaScript中5個(gè)常用的對(duì)象
JavaScript是一門腳本語(yǔ)言，不同于Python的是，它是一門瀏覽器腳本語(yǔ)言，而Python則是服務(wù)器腳本語(yǔ)言，我們不光要會(huì)Python，還要會(huì)JavaScript，因?yàn)樗鼘?duì)做網(wǎng)頁(yè)方面是有很大作用的。本篇內(nèi)容小編就來(lái)詳細(xì)解說(shuō)JavaScript常用的對(duì)象,需要的朋友可以參考一下
2021-10-10
微信小程序簡(jiǎn)單DEMO布局，邏輯，樣式的練習(xí)
這篇文章主要介紹了微信小程序簡(jiǎn)單DEMO布局，邏輯，樣式的練習(xí)的相關(guān)資料,這里寫一個(gè)簡(jiǎn)單實(shí)例練習(xí)小程序的布局，并附實(shí)例代碼和實(shí)現(xiàn)效果圖，需要的朋友可以參考下
2016-11-11
JavaScript嚴(yán)格模式use strict的介紹
這篇文章主要介紹了JavaScript嚴(yán)格模式use strict，嚴(yán)格模式是JavaScript中的一種限制性更強(qiáng)的變種方式。嚴(yán)格模式并不是JavaScript中的子集，它在語(yǔ)義上與正常的代碼有明顯的差異，下面我們就一起來(lái)學(xué)習(xí)該內(nèi)容吧,需要的朋友也可以參考一下
2021-12-12
探索JavaScript未來(lái)模式匹配的引入分析
這篇文章主要來(lái)帶大家探索JavaScript的未來(lái)，關(guān)于模式匹配的引入為編程體驗(yàn)帶來(lái)革命性變化分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-10-10
Openlayer?add?mark及添加hover效果實(shí)例詳解
這篇文章主要為大家介紹了Openlayer?add?mark及添加hover效果實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
微信小程序使用navigateTo數(shù)據(jù)傳遞的實(shí)例
這篇文章主要介紹了微信小程序使用navigateTo數(shù)據(jù)傳遞的實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下
2017-09-09
微信小程序教程之WXML
這篇文章主要介紹了微信小程序教程WXML的相關(guān)資料,這里提供了簡(jiǎn)單實(shí)例,需要的朋友可以參考下
2016-10-10
Svelte調(diào)試模式j(luò)s級(jí)別差異和細(xì)化后的體積差異詳解
這篇文章主要為大家介紹了Svelte調(diào)試模式j(luò)s級(jí)別差異和細(xì)化后的體積差異詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
js 實(shí)現(xiàn)驗(yàn)證碼輸入框示例詳解
這篇文章主要為大家介紹了js 實(shí)現(xiàn)驗(yàn)證碼輸入框示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
微信小程序之選項(xiàng)卡的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序之選項(xiàng)卡的實(shí)現(xiàn)方法的相關(guān)資料,希望大家通過(guò)本文能實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下
2017-09-09