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

props

path字段是allPath生效的关键参数，但是比较晦涩难以理解，建议辅以public/data/file-list-all.json数据结构理解，这些path字段只是为了支持在此数据结构下的自定义字段名

Events

Form Methods

Slot

版本记录

0.2.1 修复allPath不传时的报错

0.2.0 修复平铺模式checkbox选中仍隐藏问题

0.1.8 修复上传文件的路径问题

0.1.7 修复文件路径拼接逻辑未采用splicOptions参数的错误，并将splicOptions废弃，合并入props，所有带path前缀的字段

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. 优化预览组件