el-image图片预览再封装

elementui中的el-image功能已经非常强大，基本满足了日常交互场景。但是总有那么一些场景没法直接使用。

最近工作遇见一个点击图片名称，调取接口获取图片地址后，直接放大预览图片。这时就不得不思考一下，该如何好好利用已有的el-image模块了。

1，首先将el-image隐藏

// 单图片预览，picSrc为需要预览的图片地址，已经在data中初始化
<el-image
  :class="classKey"
  style="width: 100%; display: none"
  :src="picSrc"
  :preview-src-list="[picSrc]"
/>

2，在data中初始化一些属性

data() {
  return {
    picSrc: '',
    picSrcList: [],
    classKey: 'abc' + (Math.floor(Math.random() * (99999 - 1 + 1)) + 1)
  }
}

3， 在methods中写点击el-image的动作，this.classKey一定要注意，否则容易出错

// 用户从接口中获取到图片地址后，调用该方法
showPic() {
  const ele = document.querySelector(`.${this.classKey} .el-image__preview`)
  setTimeout(() => {
    try {
      ele.click()
    } catch (err) {
      this.showPic(ele)
    }
  }, 200)
}