base文件下 .swiper-container这个类名在哪可也找到？
来源：2-2 幻灯片组件--模拟数据
慕前端5592812
2019-10-13 15:15:07
<template>
<swiper :options="swiperOption" :key="keyId">
<!--<swiper-slide v-for="item in sliders">-->
<!--<a href="">-->
<!--<img src="" alt=""/>-->
<!--</a>-->
<!--</swiper-slide>-->
<slot></slot>
<div class="swiper-pagination" v-if="pagination" slot="pagination"></div>
</swiper>
</template>
<script>
import {swiper} from 'vue-awesome-swiper';
export default {
name: 'MeSlider',
components: {
swiper
},
props: {
direction: {
type: String,
default: 'horizontal',
validator(value) {
return [
'horizontal',
'vertical'
].indexOf(value) > -1;
}
},
interval: {
type: Number,
default: 3000,
validator(value) {
return value >= 0;
}
},
loop: {
type: Boolean,
default: true
},
pagination: {
type: Boolean,
default: true
},
data: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
keyId: Math.random()
};
},
watch: {
data(newData) {
if (newData.length === 0) {
return;
}
this.swiperOption.loop = newData.length === 1 ? false : this.loop;
this.keyId = Math.random();
}
},
created() {
this.init();
},
methods: {
init() {
this.swiperOption = {
watchOverflow: true,
direction: this.direction,
autoplay: this.interval ? {
delay: this.interval,
disableOnInteraction: false
} : false,
slidesPerView: 1,
loop: this.data.length <= 1 ? false : this.loop,
pagination: {
el: this.pagination ? '.swiper-pagination' : null
}
};
}
}
};
</script>
<style lang="scss" scoped>
.swiper-container {
width: 100%;
height: 100%;
}
</style>
1回答
-
好帮手慕慕子
2019-10-13
同学你好， swiper-container这个类是swiper插件提供的一个类名， 是固定的用法。
具体可以参考swiper官网哦 https://3.swiper.com.cn/api/index.html
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题