swiper组件封装

swiper组件

<!--组件调用-->
<ui-swipe :product-image="swiperList" :img-event="showImageViewer" key-name="imageUrl"></ui-swipe>

<!--组件内容-->
<template>
  <div class="swipe" @click="imgEvent" style="visibility: 'visible' !important">
    <div class="swipe-wrap">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <figure class="swiper-slide" v-for="(pic, picIndex) in productImage" :key="picIndex" >
            <template v-if="pic.linkUrl">
              <a :href="pic.linkUrl || 'javascript:void(0)'">
                <img
                  class="h100per"
                  alt="pic"
                  :src="pic[keyName]?pic[keyName]:defaultPic"
                  style="visibility: 'visible' !important"
                />
              </a>
            </template>
            <template v-if="!pic.linkUrl">
              <img
                class="h100per"
                alt="pic"
                :src="pic[keyName]?pic[keyName]:defaultPic"
                style="visibility: 'visible' !important"
              />
            </template>
          </figure>
        </div>
        <div class="swiper-pagination swiper-pagination-red"></div>
      </div>
    </div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: ['productImage', 'imgEvent', 'keyName', 'defaultPic'],
  mounted() {
    var that = this
    Vue.nextTick(function() {
      setTimeout(() => {
        // eslint-disable-next-line no-undef
        new Swiper('.swiper-container', {
          autoplay: {
            // 自动播放
            delay: 3000, // 3s
            stopOnLast: false, // 最后一帧自动播放
            disableOnInteraction: false // 手动滑动后也能正常播放
          },
          loop: that.productImage.length > 1, // 回滚
          pagination: {
            // 配置小点
            el: '.swiper-pagination',
            clickable: true
          }
        })
      }, 200)
    })
  },
  methods: {}
}
</script>