需求：

图片列表点击可查看大图，多图可以左右滑动查看，再次点击会到缩略图的功能

思考：

开始考虑使用v-viewer组件，功能比较多，可以旋转，放大缩小图片等，但是并不完全符合需求，后采用swiper-slide,自己写组件方式完美适配需求。

效果如下：

 2.viewimglist组件

单独新建个文件，我这里是建在components文件夹下，命名为viewimglist.vue。你根据自己的文件目录建，能正确引入就行。完整的组件代码如下：

<template>
  <div class="ui-shade imglistshade">
    <div class="imgArr" @click.self="close">
      <swiper :options="swiperOption">
        <swiper-slide v-for="item in imglist" :key="item.id">
          <img :src="item" @click.self="close" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
 
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: false,
        },
        speed: 500,
      },
    };
  },
  props: {
    imglist: {
      type: Array,
      required: true,
    },
    index: {
      type: Number,
      default: 3,
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  created() {
    this.swiperOption.initialSlide = this.index;
  },
  methods: {
    close() {
      this.$emit("closeMolde", false);
    },
  },
};
</script>
 
<style>
@import "../../../node_modules/swiper/dist/css/swiper.min.css";
.imglistshade img {
  width: 100%;
  display: block;
}

.ui-shade {
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.imgArr {
  /* position: absolute; */
  height: 100vh;
  /* top: 0; */
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
}

.imglistshade .swiper-pagination-bullet-active {
  background: #fff !important;
}

.imglistshade .swiper-pagination.swiper-pagination-bullets {
  position: fixed;
  bottom: 80px;
}

.imglistshade .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
}
.swiper-pagination-bullet{
  background: #999;
}
.imglistshade .swiper-slide {
  display: flex;
  align-items: center;
}

.imglistshade .swiper-container {
  display: flex;
  align-items: center;
}

.imglistshade .swiper-container {
  overflow: visible;
  width: 100%;
}
</style>

3.在需要使用该组件的父页面使用组件

3.1 引入组件

import imglist from "../assets/components/viewimglist.vue";

 3.2 注册组件

  components: {
    imglist,
  },

3.3页面使用

<!-- 图片预览 -->
<div  v-for="(item, index) in imgArr"
      :key="index"
      class="img-display">
        <img :src="item"  @click="imgClick(index)" />
 </div>    

<imglist
      v-if="imglistmodalisshow"
      :index="crtIndex"
      :imglist="imgArr"
      @closeMolde="closeMolde"
    ></imglist>

3.4 相关的data

  data() {
    return {
      imglistmodalisshow: false, //弹出显示
      crtIndex: 0, //点击图片下标
      imgArr: [
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ], // 用于展示的图片数组
    };
  },

3.5 相关methods

    imgClick(index) {
      this.imglistmodalisshow = true;
      this.crtIndex = index;
    },
    closeMolde() {
      this.imglistmodalisshow = false;
    },