elementUi 通过 previewSrcList 预览大图

如果是希望 根据 自己定义的事件来触发方法,然后 显示大图的话,需要给图片加一个 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()
},

注意 这个 方法 来源于:www.cnblogs.com/duhui/p/15117803.h...

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!