实现图片预览遇到的一些问题（el-image-viewer）

项目需求：

点击某一行内容，展示此内容下的图片，只展示第一张，点击下一张上一张进行切换，页面上显示当前的张数，以及点击图片实现图片预览，粗略效果如下

实现过程

开始使用的<el-image>标签里的属性preview-src-list，基本效果可以实现，但是遇到一些问题：点击页面上的图片显示的当前图片的预览，但是在预览的时候切换下一张，页面上的图片没有变化。未找到合适的解决办法。

后来经查询发现，<el-image-viewer>组件（官网文档中没有，据说不兼容IE），这个组件不需要下载，只需要引入下载即可。

当然，这个过程也不完全顺利，开始依旧不能保持页面上图片和预览切换后的图片保持一致。后来发现有一个on-switch属性，在预览切换的时候触发，可以获取到当前预览图片的位置，写入一些需要的逻辑代码

 <el-image
        v-if="imgShow"
        :src="imageUrl"
        ref="previewImg"
        @click="showPreview()"
  ></el-image>
  <el-image-viewer
        v-if="showViewer"
        :on-close="closeViewer"
        :url-list="previewList"
        :on-switch="previewSwitch"
  ></el-image-viewer>

import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default{
    components: {
        ElImageViewer,
      },
    methods:{
     showPreview() {
      this.showViewer = true;
      let index = this.index - 1;
      this.previewList = this.srcList.slice(index).concat(this.srcList.slice            (0, index));
    },
    closeViewer() {
      this.showViewer = false;
    },
    previewSwitch(val) {
      this.imageList.map((item, index) => {
        if (item.url == this.previewList[val]) {
          this.imageUrl = this.imageList[index].url;
          this.index = index + 1;
        }
      });
    },
    },
}

还有个问题就是，预览效果不是点击哪张图片展示哪张，而是始终从第一张展示。这时候需要用到

url-list属性，此属性绑定预览图片的数组，如果从中途图片点击预览，同时也需要修改数组顺序。代码如上。

踩坑小结：

1. 每次点击需要把预览图片的数组previewList重置，防止出现点击一个单子出现多个单子下的图片

2. 预览图片切换时不能根据预览的下标去对应页面上显示的图片，因为预览数组的顺序会变，会出现预览和页面展示不是同一张的情况。

3. 不能使用绑定的previewList去调换数组顺序，因为previewList不是固定的，否则会出现多次在一张单子下的不同位置的图片预览，页面图片和预览图片不一致的情况

知识小结：

1. el-image-viewer使用要引用；

2. 组件中属性：

1. on-close：关闭时触发

2. on-switch：切换时触发

3. url-list：默认展示的图片数组

有些啰嗦，可能还有些不专业，只是当下的一点点记录，有错误会继续更正