ELEMENT UI只使用upload中的图片展示,不需要上传功能
程序员文章站
2022-03-22 10:13:45
最近做项目的时候用到element ui,官网给的是2.13.2默认版,很多时候进去忘记切换了,本来想直接用el-Image,但高版本都用不了,想要实现A页面上传,B页面展示,但直接用upload控件会有一个上传的+号框无法去除,所以索性自己研究了下首先去官网找到Upload控件,这个文本缩略图就是我们要实现的效果,只是去掉后面那个+号的框,我们点击鼠标右键查看源码可以看到这个的结果就是一个ul嵌套li,里面放的是img,这几个span就是对应的放大、下载、和删除方法,这些我们都不要,直接拷贝,因为...
最近做项目的时候用到element ui,官网给的是2.13.2默认版,很多时候进去忘记切换了,本来想直接用el-Image,但高版本都用不了,想要实现A页面上传,B页面展示,但直接用upload控件会有一个上传的+号框无法去除,所以索性自己研究了下
首先去官网找到Upload控件,这个文本缩略图就是我们要实现的效果,只是去掉后面那个+号的框,我们点击鼠标右键查看源码
可以看到这个的结果就是一个ul嵌套li,里面放的是img,这几个span就是对应的放大、下载、和删除方法,这些我们都不要,直接拷贝,因为这个里面的Class都是公用的,就是说这些class样式可以直接调用,我们直接拿过来
<ul class="el-upload-list el-upload-list--picture-card">
<li class="el-upload-list__item is-success" v-for="fit in picList" :key="fit.name">
<img style="width: 100%; height: 100%" :src="fit.url" @click="handlePictureCardPreview(fit)"/>
</li>
</ul>
ImgList是我们自己后台获取的图片集合,大家自己去绑定下,我这边加了个放大事件就是这个@click="handlePictureCardPreview(fit)
定义一个弹框
<el-dialog :visible.sync="dialogVisibleimge">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
记得return中定义一下这个dialogVisibleimge: false和dialogImageUrl: ‘’,methods中写一下handlePictureCardPreview方法
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url
this.dialogVisibleimge = true
},
效果
点击图片放大,这里就不演示了,功能就完成了
本文地址:https://blog.csdn.net/sinat_36483049/article/details/109237451
上一篇: IOS基础入门OC语言Xcode Day11笔记:继承、super关键字
下一篇: 单行移动拖拽