- 安装swiper
cnpm install --save swiper
- dom结构:
<template>
<div class="swiper-container fileSwiper">
<div class="swiper-wrapper">
<slot></slot> <!--插槽 -->
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</template>
- 引入swiper:
import Swiper from 'swiper'
mounted() {
console.log("swiper-mounted");
new Swiper(".fileSwiper", {
loop: true,
autoplay: {
deplay: 20000
},
pagination: {
el: ".swiper-pagination"
}
});
}
- 构造函数报错的话就在上一行加上注释:
/* eslint-disable no-new */
,具体原因不知,能解决就可!
<script>
import swiper from './File/Swiper'
export default {
components: {
swiper
}
}
</script>
- 引入组件:
import swiper from '@/views/File/Swiper'
- 导入样式:
import 'swiper/css/swiper.min.css'
- 测试轮播内容:
<swiper>
<div class="swiper-slide" v-for="n in 10" :key="n">{{n}}</div>
</swiper>