element ui 预览大图组件

element 有一个官方没放在介绍里的组件 预览图组件

<!--缩略图--> 
<el-image
  @click="handleImgClick(index)"
  v-for="(item, index) in imgList"
  :key="index"
  :src="item"
/>
<!--大图--> 
<el-image-viewer
  v-if="showViewer"
  :on-close="closeViewer"
  :url-list="viewerImgList"
/>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

export default {
  name: "buildingDetailCommon",
  components: { ElImageViewer }, //引入组件
  data() {
    return {
      imgList: ["https://wx3.sinaimg.cn/orj360/002n4Upcgy1gw01mh58cej60m80gjgol02.jpg","https://wx1.sinaimg.cn/orj360/002n4Upcgy1gw01mgvx14j60sg0l2gpc02.jpg","https://wx3.sinaimg.cn/large/8f5bc66fly8grqsm7ajmqj20gg088t99.jpg"], //页面上显示图片数组
      showViewer: false, //控制预览显示
      viewerImgList: [], //预览图显示的列表数组
    };
  },
  methods: {
    // 点击缩略图的方法  同时从我们点击这张开始预览
    handleImgClick(index) {
      this.showViewer = true;
      let tempImgList = [...this.imgList];
      console.log(tempImgList);
      let temp = [];
      for (let i = 0; i < index; i++) {
        //temp内推入tempList当前第一项 shift会改变原数组
        temp.push(tempImgList.shift());
      }
      this.viewerImgList = tempImgList.concat(temp);
      console.log(this.viewerImgList);
    },
    //关闭预览图方法
    closeViewer() {
      this.showViewer = false;
    },
  },
};
</script>

/* 大图预览的关闭图标 改为大一点的白色 */
.el-image-viewer__btn.el-image-viewer__close {
    color: #FFF;
    opacity: unset;
    top: 50px;
    right: 50px;
    width: 50px;
    height: 50px;
    font-size: 50px;
}