欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年09月26日 10:25:37   作者：神奇的程序員  
這篇文章主要為大家介紹了JS實現(xiàn)一個文件選擇組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

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

本文將跟大家分享一下這個插件，歡迎各位感興趣的開發(fā)者閱讀本文。

插件安裝

yarn add file-folder-selector
# or
npm install file-folder-selector --save

插件使用

在你需要使用此插件的業(yè)務代碼中導入插件。

<script setup lang="ts">
  import { FileSelect } from "file-folder-selector";
  // 組件的樣式文件，可以在項目的業(yè)務代碼內(nèi)導入，也可以在項目的入口文件導入
  import "file-folder-selector/dist/style.css";
</script>

在template中使用即可。

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

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

參數(shù)說明

插件接收5個可選參數(shù)：

  • fileData 文件樹結構數(shù)據(jù)
    • title 文件名, 值為string 類型
    • id 文件id, 值為string 類型
    • type 文件類型, 值為"file"或"folder"
    • imgSrc 文件圖片地址（可選參數(shù)），值為string 類型
    • childData 子文件數(shù)據(jù)（可選參數(shù)），值為array類型，如果type為"folder"，則傳此參數(shù)，數(shù)組中的每一項類型就為fileData的類型。
  • defaultFolderImage 默認的文件夾圖標，值為string 類型
  • defaultFileImage 默認的文件圖標，值為string 類型
  • defaultSearchImage 默認的搜索圖標，值為string 類型
  • defaultFolderPathImage 默認的文件夾路徑圖標，值為string 類型

注意：插件默認的圖標更換不支持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)一個文件選擇組件詳解的詳細內(nèi)容，更多關于JS文件選擇組件的資料請關注腳本之家其它相關文章！

相關文章

  • JavaScript中5個常用的對象

    JavaScript中5個常用的對象

    JavaScript是一門腳本語言，不同于Python的是，它是一門瀏覽器腳本語言，而Python則是服務器腳本語言，我們不光要會Python，還要會JavaScript，因為它對做網(wǎng)頁方面是有很大作用的。本篇內(nèi)容小編就來詳細解說JavaScript常用的對象,需要的朋友可以參考一下
    2021-10-10
  • 微信小程序 簡單DEMO布局，邏輯，樣式的練習

    微信小程序 簡單DEMO布局，邏輯，樣式的練習

    這篇文章主要介紹了微信小程序 簡單DEMO布局，邏輯，樣式的練習的相關資料,這里寫一個簡單實例練習小程序的布局，并附實例代碼和實現(xiàn)效果圖，需要的朋友可以參考下
    2016-11-11
  • JavaScript嚴格模式use strict的介紹

    JavaScript嚴格模式use strict的介紹

    這篇文章主要介紹了JavaScript嚴格模式use strict，嚴格模式是JavaScript中的一種限制性更強的變種方式。嚴格模式并不是JavaScript中的子集，它在語義上與正常的代碼有明顯的差異，下面我們就一起來學習該內(nèi)容吧,需要的朋友也可以參考一下
    2021-12-12
  • 探索JavaScript未來模式匹配的引入分析

    探索JavaScript未來模式匹配的引入分析

    這篇文章主要來帶大家探索JavaScript的未來，關于模式匹配的引入為編程體驗帶來革命性變化分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-10-10
  • Openlayer?add?mark及添加hover效果實例詳解

    Openlayer?add?mark及添加hover效果實例詳解

    這篇文章主要為大家介紹了Openlayer?add?mark及添加hover效果實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-11-11
  • 微信小程序使用navigateTo數(shù)據(jù)傳遞的實例

    微信小程序使用navigateTo數(shù)據(jù)傳遞的實例

    這篇文章主要介紹了微信小程序使用navigateTo數(shù)據(jù)傳遞的實例的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下
    2017-09-09
  • 微信小程序 教程之WXML

    微信小程序 教程之WXML

    這篇文章主要介紹了微信小程序 教程WXML的相關資料,這里提供了簡單實例,需要的朋友可以參考下
    2016-10-10
  • Svelte調(diào)試模式js級別差異和細化后的體積差異詳解

    Svelte調(diào)試模式js級別差異和細化后的體積差異詳解

    這篇文章主要為大家介紹了Svelte調(diào)試模式js級別差異和細化后的體積差異詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-12-12
  • js 實現(xiàn)驗證碼輸入框示例詳解

    js 實現(xiàn)驗證碼輸入框示例詳解

    這篇文章主要為大家介紹了js 實現(xiàn)驗證碼輸入框示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-09-09
  • 微信小程序之選項卡的實現(xiàn)方法

    微信小程序之選項卡的實現(xiàn)方法

    這篇文章主要介紹了 微信小程序之選項卡的實現(xiàn)方法的相關資料,希望大家通過本文能實現(xiàn)這樣的功能，需要的朋友可以參考下
    2017-09-09

最新評論