VUE点击swiper图片放大显示（演示web端）

实现效果：点击 swiper图片放大显示

 点击图片：（可以根据自己的需求，把单张图片改成swiper）

 主要代码：

<swiper ref="mySwiperHonor" class="swiper_honor" :options="swiperOptionHonor">
          <swiper-slide class="swiper-slide" v-for="(item, index) of honorList" :key="index">
            <div class="image"><img :src="item.imgurl" /></div>
          </swiper-slide>
</swiper>
//显示图片的组件
<pic-show :imgUrl="imgurl" :imgShow="imgShow" @closeimg="imgClose"></pic-show>

picShow.vue(组件)：

<template>
  <div v-show="imgShow" class="loading_box">
    <div class="loading_mask" ></div>
    <div class="loading_toast" @click="onImgMiss">
      <img :src="imgUrl" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    imgShow: {
      type: Boolean,
      default: false
    },
    imgUrl: {
      type: String,
      default: function() {
        return '';
      }
    }
  },
  data() {
    return {
      show: false,
      picUrl: ''
    };
  },
  created() {
    if (this.imgShow) {
      this.show = this.imgShow;
    }
    if (this.imgUrl) {
      this.picUrl = this.imgUrl;
    }
  },
  watch: {
    imgShow(val) {
      this.show = val;
    },
    imgUrl(val) {
      this.picUrl = val;
    }
    },
    methods: {
      onImgMiss(){
        this.$emit('closeimg')
      }
    }
};
</script>

<style lang="scss" scoped>
@import '@/assets/style/mixin';
.loading_box .loading_mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5000;
}
.loading_box .loading_toast {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%) translateY(-50%);
  // border-radius: 5px;
  // background: rgba(0, 0, 0, 0.8);
  text-align: center;
  padding: 25px 0;
  box-sizing: border-box;
  // font-size: 18px;
  z-index: 5001;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>

swiper options配置：

swiperOptionHonor: {
        slidesPerView: 5,
        initialSlide :2,
        centeredSlides: true,
        on:{
            tap: function () {
              _this.imgShow = true;
              _this.imgurl = _this.honorList[this.clickedIndex].imgurl
                }
            },
      }

点击关闭：

 imgClose(){
      this.imgShow = false;
    }