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>