用於vue框架的文件管理器插件，雲盤、網盤。

wl-explorer

簡介

用於vue框架的文件管理器插件，雲盤。File manager plug-in for vue framework, cloud disk.

一個基於Vue和ElementUi的文件管理器插件，提供類似某雲盤操作檯的功能。

此組件較爲複雜，並且有些設定可能太貼合原來的項目。初次使用建議clone項目做對照，另有q羣回覆比較及時：1058847321

提供的功能

1. 文件夾的編輯，新增，移動，刪除，下載

2. 文件上傳、下載、預覽，移動

3. 類似windows文件管理器的文件夾路徑搜索，歷史記錄快捷鍵

4. 表格模式、圖標模式切換等

在線訪問

啓動

1. 克隆示例項目
git clone [email protected]:hql7/wl-explorer.git

2. 下載依賴並運行示例項目
npm install
npm run serve

3. 在你的項目上引入wl-explorer
npm i wl-explorer -S
// main.js中
import wlExplorer from "wl-explorer";`
import "wl-explorer/lib/wl-explorer.css"
Vue.use(wlExplorer);

4. 運行你的項目，並對照[email protected]:hql7/wl-explorer.git項目示例

另一個選擇

1. 克隆集成了wl-explorer組件的wl-admin後臺管理系統模板項目
git clone [email protected]:hql7/wl-admin.git

2. 下載依賴並運行示例項目
npm install
npm run serve

3. 在src/views/ui/explorer文件夾下查看mock數據方案的npm install wlExplorer 示例

快速上手

npm i wl-explorer -S

import wlExplorer from "wl-explorer";`
import "wl-explorer/lib/wl-explorer.css"
Vue.use(wlExplorer);

   <wlExplorer
      ref="wl-explorer-cpt"
      :headerDropdown="headerHandle"
      :columns="file_table_columns"
      :all-path="all_folder_list"
      :is-folder-fn="isFolderFn"
      :folderType="rource_type"
      :data="file_table_data"
      :props="explorer_prop"
      @handleFolder="handleFolder"
      @search="fileSearch"
      @del="fileDel"
      @closeFade="closeOtherLayout(fade)"
    ></wlExplorer>

  內容較多，如下

見github app.vue

文檔

Attributes

序號	參數	說明	類型	默認值
1	headerDropdown	頭部更多操作自定義菜單,item必須包括字段：name:String菜單名，command:Fn此菜單指令，可選字段disabled:Boolean是否禁用，divided:Boolean是否顯示分割線，icon:String圖標	Array	-
2	showCheckbox	是否顯示覆選框列	Boolean	true
3	showIndex	是否顯示序號列	Boolean	true
4	showBorder	表格是否顯示邊框	Boolean	true
5	data	列表數據【當前只支持一維數據，每次傳入當前文件夾數據，但是組件內會記錄並更新已經得到數據的文件夾歷史，並不過度依賴請求】	Array	-
6	columns	文件列表表頭數據	Array	所有el-table提供的Table-column Attributes
7	props	配置項	Object	詳見下方props
8	allPath	所有文件路徑列表,用於快速訪問、移動、上傳、新建時	Array	-
9	isFolderFn	判斷是否文件夾函數function(row)參數是當前行數據，函數應返回Boolean值	Function	-
10	isLockFn	判斷是否鎖定文件夾函數function(row)參數是當前行數據，函數應返回Boolean值	Function	-
11	useUpload	是否使用自帶上傳組件【如需要自定義上傳組件，在組件內部寫dom即可。不具名solt】	Boolean	true
12	uploadUrl	上傳文件地址	String	-
13	uploadReg	是否校驗上傳文件，開啓則需要使用uploadRegFuc函數	Boolean	false
14	uploadHeaders	上傳頭信息	Object	-
15	uploadOptions	上傳參數	Object	-
16	uploadLimit	最大上傳個數	Number	-
17	usePreview	是否使用自帶預覽組件【如需要自定義預覽組件，在組件內部寫dom即可。不具名solt】	Boolean	true
18	previewType	預覽文件類型，‘img’,‘video’,‘audio’,‘iframe’(包括txt、html、pdf)	String	img
19	previewOptions	文件預覽地址或配置項，除video外只需文件地址即可，video時見video.js配置項{sources: [{type: “video/mp4”,src: ‘’}]}	Object/String	-
20	splicOptions	拼接路徑配置項，{Splic: ‘Name’, Connector: ‘\’, // 連接符； Id: “Id”, // 數據源匹配字段；Parents: “Parents”, // 所有父節點自增id以上到下排列逗號分隔；IdentityId: “IdentityId”, // 當前自增id}	Object	{ Splic: 'Name', Connector: '\\', Id: "Id", Parents: "Parents", IdentityId: "IdentityId", }

props

序號	參數	說明	默認字段	字段值類型
1	isFolder	用於有布爾值字段表示數據是否文件夾類型的情況,當使用isFolderFn函數時，此參數會被忽略	isFolder	Boolean
2	isLock	用於有布爾值字段表示數據是否鎖定文件類型的情況,當使用isLockFn函數時，此參數被忽略	isLock	Boolean
3	name	用於顯示名稱列的字段	name	String
4	suffix	用於判斷後綴或顯示文件類型列的字段	suffix	String
5	match	用於設定文件路徑輸入框自動補全的匹配字段,如下面splic字段值爲false時使用	name	String
6	splic	【特殊字段】配置項中只有此參數爲字段值，其他均爲字段key，即props裏必有一個splic參數表示是否需要將路徑名拼接爲父路徑\父路徑\當前路徑的形式	Boolean	true
7	pathName	路徑數據中表示名稱的字段	name	String
8	pathId	路徑數據中表示id字段	id	String
9	pid	路徑數據中表示parentId的字段	pid	String
10	pathChildren	路徑數據中表示children字段	children	String
11	pathDisabled	路徑數據中表示禁用字段	disabled	String
12	size	設置內部組件大小，同elementui	medium	String

Events

序號	事件名稱	說明	回調參數
1	handleFolder	文件夾新增或編輯	function(act,type,file)依次爲當前選擇文件夾、類型edit,add、當前的路徑信息
2	del	刪除	function(data)依次爲要刪除的數據
3	search	獲取數據	function(path, true)依次爲當前路徑對象、是否需要更新數據（不需要表示存在歷史數據）
4	download	下載文件或文件夾	function(data, cb)依次爲選中數據，請求成功後的下載回調函數，使用時將接口設爲blob格式，將帶請求頭的返回值放進cb(res)即可
5	move	移動	function(to, data, load)依次爲移動的目標，要移動的數據，防抖變量。在時間的最上部設置load爲true可以防抖+loading效果，請求結束需要手動設置爲fasle
6	closeFade	關閉其他彈出框	爲防止彈出框覆蓋，應在接收到此函數時關閉外部頁面上其他遮罩性的dom
7	showUpload	打開上傳界面	不使用自帶上傳時調用
8	uploadBefore	上傳前回調	function(file, path)依次爲上傳文件，當前路徑對象。可此函數裏調整上傳接口參數
9	upload	上傳事件	function(data, cb)依次爲當前路徑對象，必須執行的上傳回調，最遲應在此函數調整上傳參數，後調用cb()上傳
10	uploadSuccess	上傳成功回調	function(res)依次爲接口返回數據，當接口返回列表行實體時，會自動處理邏輯並更新當前數據及歷史數據【建議】，當成共不反回數據時，應請求接口更新數據，但是如上傳路徑非當前路徑則歷史數據需要手動調用方法更新
11	uploadError	上傳失敗回調	function(err)依次爲錯誤信息
12	preview	預覽事件	function(data, cb)依次爲當前選中預覽的數據、打開預覽組件的回調，應在此處更新預覽參數後調用cb()打開預覽

Form Methods

方法名	說明	參數
updateHistoryData	更新歷史數據，插件有歷史時優先使用歷史數據，因此非當前路徑已經記錄歷史數據的且數據發生變動時，需手動調用添加	function(item, val, update) 依次爲：發生數據變動的路徑信息Object（至少存在你參數7 props裏的pathId字段用於在歷史裏匹配）；變動後的列表數據Array（主要用於新增文件夾或自定義上傳時選擇了非當前路徑時的手動更新，【刪除會自動處理】）；是否覆蓋性更新Boolean（默認爲false，當時false時執行數組合並，true時爲完整數據覆蓋）

Slot

序號	name	說明
1	header-btn	頭部自定義操作按鈕，位置在更多操作按鈕前
2	header-dropdown	頭部更多操作slot，建議使用參數1的形式
3	table-column-top	自定義列，位置在參數6前,建議使用參數6的形式，可以formatter自定義dom
4	table-column-bottom	自定義列，位置在參數6後,建議使用參數6的形式，可以formatter自定義dom
5	main	在路徑操作欄下的列表區
6	-	不具名slot，可以寫任何dom模塊

版本記錄

0.1.6 修改debounce爲throttle

0.1.5 增加size參數管理組件內小組件大小

0.1.4 修復圖標模式，名稱字段未使用props配置的錯誤

0.1.2 修復部分未按照props設置而寫死字段的代碼；修復updateHistoryData手動更新歷史記錄函數缺失問題

0.1.1 優化內置預覽組件參數缺省時的錯誤；文檔增加方法的說明；優化主slot在列表區的錯誤，並在列表區增加name爲main的slot；

0.1.0 wl-explorer第一個版本發佈

0.0.1 初次發佈，部分功能未解耦，待續

待續

1. 優化預覽組件