vue中 swiper 图片点击打开大图

 

 

<swiper :options="swiperOption">
      <swiper-slide class="swiper-slide" style="text-align: center;" v-for="(item,index) in obj.images" :key="index">
        <!-- @click="showImg(item._obj.img)"  有问题有时无效  -->
        <img style="max-width:20rem;max-height:18rem; cursor: pointer;" :src="item._obj.img" />
      </swiper-slide>
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 左右箭头 -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>

swiperOption: {
        //显示分页
        pagination: {
          el: ".swiper-pagination",
        },
        //设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        //自动轮播
        // autoplay: {
        //   delay: 2000,
        //   //当用户滑动图片后继续自动轮播
        //   disableOnInteraction: false
        // },
        //开启循环模式
        loop: true,
        on: {
          click: function (e) {
             console.log('e',e ); 
             if(e.target.currentSrc!=null)
             window.open(e.target.currentSrc)
          },
        },
      },