Element el-image-viewer根据点击图片次序浏览

Element框架提供了一个el-image-viewer组件实现预览大图的功能，且可以进行图片的切换，其可以很好的代替Image组件的previewSrcList。

部分源码为：

export default {
  name: 'elImageViewer',
  props: {
    urlList: {
      type: Array,
      default: () => []
    },
    zIndex: {
      type: Number,
      default: 2000
    },
    onSwitch: {
      type: Function,
      default: () => {}
    },
    onClose: {
      type: Function,
      default: () => {}
    }
  },

属性较为简单，主要使用的是 urlList 和 onClose，前者是图片的列表，后者则是关闭该预览组件。

由于对图片的大图预览都是从缩略图点击而触发，由于 urlList 在初始化后，大图便从数组第一张图进行展示，而普遍的要求是点击第几张图片便从此图开始预览。

所以在点击缩略图的时候需要对 urlList 进行顺序的处理。

代码如下：

<!--缩略图--> 
<el-image
  @click="handleImgClick(index)"
  v-for="(item, index) in imgList"
  :src="item"
/>
<!--大图--> 
<el-image-viewer
  v-if="showViewer"
  :on-close="closeViewer"
  :url-list="viewerImgList"
/>
...
// 点击缩略图的方法    
handleImgClick(index) {
	this.showViewer = true;
	let tempImgList = [...this.imgList];
	let temp = [];
	for (let i = 0; i < index; i++) {
		temp.push(tempImgList.shift());
	}
	this.viewerImgList = tempImgList.concat(temp);
}
...