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

jiezi

5 年前

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

<!– ## 演示效果

–>

序号	参数	说明	类型	默认值
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",}`

序号	参数	说明	默认字段	字段值类型
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

序号	事件名称	说明	回调参数
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()打开预览

序号	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 初次发布，部分功能未解耦，待续

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

在线访问

快速上手

文档

Attributes

props

Events

Slot

版本记录