## [在線訪問](https://hql7.github.io/)
## 快速上手
`npm i wl-explorer -S`
``` jsvascript
import wlExplorer from "wl-explorer";`
import "wl-explorer/lib/wl-explorer.css"
Vue.use(wlExplorer);
```
``` template
<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>
```
``` jsvascript
內容較多，如下
```
見github [app.vue](https://github.com/hql7/wl-explorer/blob/master/src/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](https://element.eleme.cn/#/zh-CN/component/table) |
| 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 |
### Events
| 序號 | 事件名稱 | 說明 | 回調參數 |
| ---- | ---- | ---- | ---- |
| 1 | handleFolder | 文件夾新增或編輯 | function(act,type)依次爲當前選擇文件夾、類型`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()打開預覽 |
### 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 | - | 不具名slot，可以寫任何dom模塊 |
## 版本記錄
> 0.1.0 wl-explorer第一個版本發佈
> 0.0.1 初次發佈，部分功能未解耦，待續