建站
咨詢
售后
建站咨詢
新聞中心
前言
花了點時間利用廣度與深度優(yōu)先搜索算法實現(xiàn)了一個文件選擇插件，支持無限層次的文件夾嵌套，已開源并打包上傳到了npm。
建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計技術(shù)配合操作的協(xié)同工作。創(chuàng)新互聯(lián)建站專業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站制作(企業(yè)站、成都響應(yīng)式網(wǎng)站建設(shè)、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗的提升,我們力求做到極致!
本文將跟大家分享一下這個插件，歡迎各位感興趣的開發(fā)者閱讀本文。
插件安裝
yarn add file-folder-selector
# or
npm install file-folder-selector --save
插件使用
在你需要使用此插件的業(yè)務(wù)代碼中導(dǎo)入插件。
在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 文件。
分享題目：讓我們一起實現(xiàn)一個文件選擇組件
鏈接地址：http://www.5511xx.com/article/ccceijc.html
