el-upload源码中的upload-list.vue模板样式


背景:上传功能不是ajax实现,所以导致无法直接食用el-upload,但是想用el-upload的HTML模板和样式,所以从源码中选取一点出来。

源码位置
node_modules>element-ui>packages>upload>src>upload-list.vue

对源码的理解
- 使用了transition-group实现过渡动画,详细不做细究,这里就直接使用。
disabled变量猜测为禁止上传,因为其他地方处理,所以这里就都是false。
- 用v-for循环li标签,其中file.status相关猜测与ajax 上传相关,这里就直接用ready/success状态。tabindex属性设置了使用键盘上的 "Tab" 键
- slot标签插槽
- a标签将文件图标和文件名包裹
- label标签将图标包裹
- i 标签来使用图标(其实i 标签表示斜体的意思)
el-icon-circle-check为文件上传成功后的打圈的对勾图标
el-icon-check为图片上传成功后的对勾图标
- i 标签来实现删除文件
- el-progress猜测与ajax 上传相关,不适用
- span(文本的容器)标签来实现picture card样式
- 再用span标签包裹标签实现预览,删除下载

补充:使用el-image预览


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM