element之el-image-viewer(图片查看器)单独

1使用场景

element提供图片预览，不过是el-image里面通过previewSrcList（props）开启。
有时也存在，单独使用，比如btn或者图标开启预览之类。
处理上下张，可以直接将点击放第一张，其余排列。

2element图片预览单独

template

//:z-index="showIndex"//直接调取index失败
<btn @click="onPreview(name)" />
...
<el-image-viewer  class="pre_img"     
                     :on-close="closeViewer"//关闭时触发
                     :on-switch="picSwitch"//切换时触发
                     :url-list="showArr.imgs"/>//默认展示的图片数组
//图片详情
<transition name="slide-fade">
      <div v-if="xx" >照片详情</div>
....
</transition>
<style scoped>
// 滑入
   .slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(100%);
  -webkit-transform: translateX(100%); 
}
.slide-fade-enter-active,
.slide-fade-leave-active {
  will-change: transform;
  transition: all 0.35s ease;
}
</style>

methods

data() {
  return {
showindex:0//获取当前点击的z-index
  }
}
...
//点击某张图或者icon或btn（带参数查询）
onPreview (name) {/
      let index = _.findIndex(this.showArr.data, { name: name })//lodash查找其余一样找到index
  //当前之前/当前之后
      let startArrImgs=this.showArr.imgs.slice(index,this.showArr.imgs.length)
      let endArrImgs=this.showArr.imgs.slice(0,index)
      startArrImgs.push.apply(startArrImgs, endArrImgs)
      //【1，2，3】【4，5】---【1，2，3，4，5】
      this.showIndex=0;//z-index//放第一张展示，直接调用initialIndex/z-index失效，折中一下
},
//切换每一张时触发
 picSwitch(val) {
      this.showIndex=val//搭配图片详情使用
    },
    // 关闭查看器
    closeViewer () {
      this.showViewer = false
    },

参考资料
https://www.jianshu.com/p/33a6e484778c
https://github.com/ElemeFE/element/blob/dev/packages/image/src/image-viewer.vue