<template>
|
<div class="swiper2 pr" style="height:100%">
|
<swiper :options="swiperOption" ref="mySwiper" style="height:100%">
|
<!-- slides -->
|
<swiper-slide v-for="(slide, index) in data" :key="index">
|
<slot :data="slide"></slot>
|
</swiper-slide>
|
<!-- Optional controls -->
|
<div class="swiper-pagination" v-if="isShowPagination" slot="pagination"></div>
|
|
<!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
|
|
</swiper>
|
<div class="swiper-button-prev" slot="button-prev" v-if="isShowButton" @click="swiper.slidePrev()">
|
<i class="d-block fas fa-angle-up"></i>
|
</div>
|
<div class="swiper-button-next" slot="button-next" v-if="isShowButton" @click="swiper.slideNext()">
|
<i class="d-block fas fa-angle-down"></i>
|
</div>
|
<div class="msg">
|
<slot name="msg"/>
|
</div>
|
</div>
|
</template>
|
<script>
|
import 'swiper/dist/css/swiper.css'
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
export default {
|
components: {
|
swiper,
|
swiperSlide
|
},
|
props: {
|
slideWidth: {
|
default: '',
|
type: String
|
},
|
slideHeight: {
|
default: '50%',
|
type: String
|
},
|
isShowPagination: {
|
default: false,
|
type: Boolean
|
},
|
isShowButton: {
|
default: true,
|
type: Boolean
|
},
|
data: {
|
default: () => [],
|
type: Array
|
}
|
},
|
data() {
|
return {
|
swiperOption: {
|
pagination: {
|
el: '.swiper-pagination',
|
clickable: true
|
},
|
slidesPerView: 'auto',
|
spaceBetween: 10,
|
direction: 'vertical',
|
height: 56
|
}
|
}
|
},
|
computed: {
|
swiper() {
|
return this.$refs.mySwiper.swiper
|
}
|
},
|
methods: {
|
slideTo(index) {
|
console.log(index, '索引', this.$refs.mySwiper)
|
this.$refs.mySwiper.swiper.slideTo(index)
|
}
|
},
|
mounted() {
|
// current swiper instance
|
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
|
console.log('this is current swiper instance object', this.swiper)
|
// this.swiper.slideTo(3, 1000, false)
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.swiper2 {
|
.swiper-container {
|
padding: 0 0;
|
}
|
.swiper-button-prev{
|
background-image: none;
|
display: none;
|
i {
|
font-size: 25px;
|
color: #76bef7;
|
margin:0px 0px 0px 0px;
|
}
|
}
|
.swiper-button-next {
|
background-image: none;
|
display: none;
|
i {
|
font-size: 25px;
|
color: #76bef7;
|
margin:12px 0px 0px 0px;
|
}
|
}
|
.swiper-button-prev {
|
position: absolute;
|
top: 0;
|
left: 35%;
|
}
|
.swiper-button-next {
|
position: absolute;
|
top: 107%;
|
right: 10%;
|
}
|
&:hover .swiper-button-prev,
|
&:hover .swiper-button-next {
|
display: block;
|
}
|
.msg {
|
position: absolute;
|
left: 0px;
|
bottom: 2px;
|
width: 100%;
|
}
|
.swiper-slide {
|
-webkit-flex-shrink: 0;
|
-ms-flex-negative: 0;
|
flex-shrink: 0;
|
width: 100%;
|
height: 50%;
|
margin-bottom: 0 !important ;
|
position: relative;
|
-webkit-transition-property: -webkit-transform;
|
transition-property: -webkit-transform;
|
-o-transition-property: transform;
|
transition-property: transform;
|
transition-property: transform, -webkit-transform;
|
}
|
}
|
</style>
|
