用于vue框架的文件管理器插件，云盘、网盘。

本文链接：https://blog.csdn.net/qq_15390381/article/details/105201799

wl-explorer是一个基于Vue和ElementUI的文件管理器插件，提供云盘功能，包括文件和文件夹的增删改查、上传下载预览等。支持在线访问，提供详细文档，包含Attributes、props、Events、Form Methods和Slot等信息。目前持续更新中，最新版本修复了多项错误并增加了新特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wl-explorer

简介

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

一个基于Vue和ElementUi的文件管理器插件，提供类似某云盘操作台的功能。

此组件较为复杂，并且有些设定可能太贴合原来的项目。初次使用建议clone项目做对照，另有q群回复比较及时：1058847321

提供的功能

文件夹的编辑，新增，移动，删除，下载
文件上传、下载、预览，移动
类似windows文件管理器的文件夹路径搜索，历史记录快捷键
表格模式、图标模式切换等

在线访问

启动

1. 克隆示例项目
git clone git@github.com: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. 运行你的项目，并对照git@github.com:hql7/wl-explorer.git项目示例

另一个选择

1. 克隆集成了wl-explorer组件的wl-admin后台管理系统模板项目
git clone git@github.com: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"
      @se