在elementUi种通过previewSrcList实现预览图片示例代码

前端  /  管理员 发布于 2年前   752

一般项目中希望根据自己定义的事件来触发方法才进行查看大图，需要给图片加一个 ref=”preview”

比如这样：

 <div  class="el-upload-list__item is-success image-upload avatar"  >
     <el-image  class="flex-img__image"
         ref="preview"
        :src="imageConfig.imageUrl"
        :preview-src-list="imageConfig.srcList"
        @click="handlePictureCardPreview"
        style="width: 100%; height: 100%">
     </el-image>
     <label  class="el-upload-list__item-status-label">
        <i  class="el-icon-upload-success el-icon-check"></i>
     </label>
     <span  class="el-upload-list__item-actions">
         <span  @click="handlePictureCardPreview"><i  class="el-icon-zoom-in"  :preview-src-list="imageConfig.srcList"></i></span>
         <span  class="el-upload-list__item-delete"><i  class="el-icon-delete"  @click.stop="handleRemove()"></i></span>
     </span>
 </div>

我这里 在图片上方还放了俩 icon 所以无法直接 点击图片 显示大图，

于是 我就 给 图片 加了一个 ref=”preview”然后 

<span  @click="handlePictureCardPreview">
    <i  class="el-icon-zoom-in"  :preview-src-list="imageConfig.srcList"></i>
</span>

这里 加了一个点击事件：

 handlePictureCardPreview() {
     this.$refs.preview.clickHandler()
},