Element Ui图片预览组件通过按钮触发图片预览

element ui的Image 图片组件的大图预览需要点击一个图片才能进行触发大图预览，那么我们不想通过点击小图进行图片预览要怎么做呢？

预览

先看下DEMO

场景

项目中需要点击按钮去向后台请求图片地址，然后再进行大图预览

实现思路

我们可以把这个默认预览的小图用一个统一的图片进行代替，提前放在项目的静态文件中，
然后把这个图片定位到按钮的上方，再将图片的透明度设置为0,这样点击按钮其实是点击了按钮上方的小图

第一步

我们先实现个表格样式

<table border=1>
    <tr>
      <th>序号</th>
      <th>订单号</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>1</td>
      <td>0356894598</td>
      <td>
        <div class='img'>
          图片预览
          <div class="demo-image__preview">
            <el-image lazy :src="url" @click='clickimg' :preview-src-list="srcList">
            </el-image>
          </div>
        </di>
      </td>
    </tr>
</table>

再加点样式

.img {
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: relative;
}
.demo-image__preview {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  cursor:pointer;
}
.demo-image__preview .el-image {
  width: 100%;
  height: 100%;
}

你会发现图片的小图脱离文档里覆盖在了文字的上方，然后我们加个透明度给他

.demo-image__preview {
 ..省略代码..
 ..省略代码..
 opacity: 0;
}

这样，点击文字其实就是点击小图达到以假乱真的效果，然后我们加入js

  data() {
    return {
      url:
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLMfiju_jWNy52oXUtPINHL9-PKyGJC6i01w&usqp=CAU",
      srcList: []
    };
  },
  methods: {
    async clickimg() {
      this.srcList = [
        (await this.getimgById(0)).src,
        (await this.getimgById(1)).src,
        (await this.getimgById(2)).src
      ];
    },
    getimgById(id) {
      let imglist = [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ];
      return new Promise((res) => {
        res({ src: imglist[id] });
      });
    }
  }

这里模拟了一个根据id请求图片的接口，可以自行替换。
你学会了吗？

---

---

---

不过有网友发现了Elementui中的图片预览也是一个组件，并且可以单独使用(cdn下目前无法使用)

<template>
    <div>
        <el-button @click="showViewer=true">预览</el-button>
        <el-image-viewer
             v-if="showViewer"
             :on-close="()=>{showViewer=false}"
             :url-list="imgList" />
    </div>
    </template>
    <script>
    export default {
    name: 'Index',
    components: {
            'el-image-viewer':()=>import('element-ui/packages/image/src/image-viewer')
        },
    data() {
        return {
         showViewer: false,
         imgList:[ 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']
        }
    }
</script>