保存成功
订阅成功
保存失败,请重试
提交成功

基于 Vue + Element-UI + Vue-Simple-Upload 实现仿百度网盘文档管理

¥8会员免费看
乔巴巴@Demo源码君

后台管理系统中,“文档管理”模块很常见且很重要,本场 Chat 就针对“文档管理”进行简单探究,且仿照“百度网盘”操作方式实现一个实用的 Demo,预览地址(该 Demo 直接在上两篇“框架”上实现的,有兴趣的可以看一下我的上两篇文章,其功能也还在优化中)。这个 Demo 细节比较多,干货也比较多,主要是 js 相关操作,Element-UI 的 Table 组件操作,再加上 Vue 上传组件 Vue-Simple-Uploader 相关操作。文档管理跟后台紧密结合,本场 Chat 侧重前端相关操作,但是源码中会提示读者适当的位置进行 API 操作,以及与后台对接时的某些注意项(约定)。

文档模块“隐藏”操作:

  1. “虚线框”内文件拖拽上传;
  2. 双击文件夹可进入该文件夹
  3. 单击选中当前行,再次单击选中行,可编辑文件(夹)名称
  4. “文件夹面包屑”中可点击“返回上一级”,也可以返回到指定“文件夹”
  5. 鼠标悬浮显示“删除、下载”,且点击可操作
  6. 大小、日期可排序
  7. ......

本场干货:

  1. Vue-Simple-Uploader 上传组件的常规用法(包括与后台对接“约定”)
  2. Element-UI 框架的 Table 组件行间操作的拓展(如,重命名文件(夹),鼠标悬浮显示“删除”、“下载”等)
  3. 文档管理中相关 JS 操作及对象、数组操作整理
  4. 前端源码 (文档管理中你所看到的操作方法和 UI 样式)

你可以结合源码修改,与后端联合,打造实现属于自己的“文档管理”模块,了解其实现思路后,可以使用其他框架实现,也是完全 ok 的。

本场 Chat 适合人群:如果你对上面写的感兴趣,且有一点 Vue 基础即可

266 人已订阅
会员免费看
¥8 原价订阅
关注提示×
扫码关注公众号,获得 Chat 最新进展通知!
入群与作者交流×
扫码后回复关键字 入群
Chat·作者交流群
入群码
该二维码永久有效
严选标准
知道了
Chat 状态详情
开始预订
预订结果公布20.01.06

预订达标,作者开始写作

审核未达标,本场 Chat 终止

作者文章审核结果公布20.02.13

审核达标,文章发布

审核未达标,本场 Chat 终止

Chat 完结
×
已购列表