共计 3367 个字符，预计需要花费 9 分钟才能阅读完成。
在线访问
快速上手
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 |
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 初次发布，部分功能未解耦，待续
正文完
发表至： javascript
2019-11-11
