ELEMENT UI只使用upload中的图片展示，不需要上传功能

最近做项目的时候用到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