img图片不在div中_正确在Vue中使用awesome-swiper；解决点击不生效的问题

到处都是坑，坑，坑

1、之前的写法是在data中配置swiperOption属性；

出现的问题是，当图片“滑动起来后”有的图片点击事件并不生效；

后来一查才知道，当loop为true时，会自动补充虚拟的DOM；在该DOM上Vue中的事件无法触发！

2、模仿下面的网址，改造原来的轮播图时出现的问题，点击当前图片的时index值没有对应上，因为我的页面是想点击图片然后跳到对应的url,结果没想到出现“页面丢失”（data-index和dataset那几行代码没看懂，当时没有写）

3、模仿下面的网址添上data-index和dataset搞定！！！

留有的疑问：（希望看到的大佬能解释一下）

1）这两个'this'没反应过来,只知道一个调用vue中的变量，一个是调用swiper的的变量。

2）当拖动图片时，底下的文字会抖动，一直也没能成功解决，但是放在生产环境却又不抖动。

补充：

当 welfareNoticeLists的长度为1时需要单独处理样式：

当长度为1时，占满整个div,图片会被拉伸

当长度为1时，处理后的样式

当长度大于2时的样式

感谢大神的链接：https://blog.csdn.net/Mrswater/article/details/91450892

<template>
  <div class="vueSwiper">
    <div class="welfareNoticeLists" v-if="welfareNoticeLists.length>0">
        <div class="vueSwiperContainer" style="" id="swiper1" >
          <template>
            <swiper :options="swiperOption" ref="mySwiper" >
              <template v-if="this.welfareNoticeLists.length === 1">
                <!-- 需要单独设置样式 -->
                <swiper-slide class="swiper-slide" v-for="(item, index) in welfareNoticeLists" :key="index"
// 核心代码！！！！
 :data-index='index'>
                  <div class="slide-item" style="width:80%;margin-left:10%">
                    <img src="./img/01.png" alt="" style="opacity:1;width:100%;height:100%;" >
                    <p class="slide-item-title">{{item.title}}</p>
                    <p class="slide-item-time">{{item.created}}</p>
                  </div>
                </swiper-slide>
                <!-- 注意复制swiper-slide会报错；重复的index -->
                <!-- <swiper-slide class="swiper-slide" v-for="(item, index) in welfareNoticeLists" :key="index" :data-index='index'>
                  <div class="slide-item" style="width:80%;margin-left:10%">
                    <img src="./img/01.png" alt="" style="opacity:1;width:100%;height:100%;" >
                    <p class="slide-item-title">{{item.title}}</p>
                    <p class="slide-item-time">{{item.created}}</p>
                  </div>
                </swiper-slide> -->
              </template>
              <template v-if="this.welfareNoticeLists.length > 1">
                <swiper-slide class="swiper-slide" v-for="(item, index) in welfareNoticeLists" :key="index" :data-index='index'>
                  <div class="slide-item">
                    <img src="./img/01.png" alt="" style="opacity:1 ">
                    <p class="slide-item-title">{{item.title}}</p>
                    <p class="slide-item-time">{{item.created}}</p>
                  </div>
                </swiper-slide>
              </template>
            </swiper>
          </template>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  name: 'vueSwiper',
  data () {
    return {
      welfareNoticeLists: [
        {title: '行到水穷处', created: '2019-11-01'},
        {title: '坐看云起时', created: '2019-11-01'}
      ],
      // swiperOption: {
      //   loop: true,
      //   direction: 'horizontal',
      //   spaceBetween: 20, // slide间隙
      //   centeredSlides: true,
      //   watchSlidesProgress: true,
      //   loopAdditionalSlides: 2,
      //   lazyLoadingOnTransitionStart: true, // 过渡开始就加载
      //   roundLengths: true, // 宽度取整
      //   slidesPerView: 1.3// 页面分组显示
      // }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mywiper.swiper
    },
     swiperOption () {
      let _this = this
      let option = {
        loop: true,
        direction: 'horizontal',
        spaceBetween: 20, // slide间隙
        centeredSlides: true,
        watchSlidesProgress: true,
        loopAdditionalSlides: 2,
        lazyLoadingOnTransitionStart: true, // 过渡开始就加载
        roundLengths: true, // 宽度取整
        slidesPerView: 1.3, // 页面分组显示
        on: {
          click: function (e) {
// 核心代码！！！
            let index = this.clickedSlide.dataset.index
            console.log('index:::', index)
            // window.location.href = _this.welfareNoticeLists[index].url
          }
        },
        preventLinkPropagation: false
      }
      if (this.welfareNoticeLists.length < 2) {
        option.slidesPerView = 1
        option.slidesPerGroup = 1
      }
      if (this.welfareNoticeLists.length < 3) {
        option.autoplay = false
      }
      return option
    }
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.vueSwiper {
  .welfareNoticeLists {
    width:100%;
    height:300px;
    border: 1px solid red;
    box-sizing: border-box;
    .vueSwiperContainer {
      // background: yellowgreen;
    }
    img {
      width:100%;
      height:100%;
    }
  }

}
  
</style>
<style lang="less">
.swiper-container-android .swiper-slide {
  // border:1px solid red;
  border-radius: 20px  !important;
  img {
   border-radius: 20px  !important; 
  }
}
</style>