记录一些工作中用到的插件
插件地址 https://github.com/surmon-china/vue-awesome-swiper
轮播图
- 1、安装插件
1
npm install vue-awesome-swiper --save
- 2、main.js引入插件：
1
2
3
4//导入轮播图插件
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper);封装轮播图组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<template>
<swiper :options="swiperOption">
<swiper-slide v-for="(slide,key) in swiperSlides" :key="key">
<img :src="slide" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
name: 'carousel',
props:['swiperSlides'], // this.swiperSlides
data() {
return {
//官方参数
swiperOption: {
autoplay:true,
setWrapperSize :true,
observeParents:true,
pagination: {
el: '.swiper-pagination'
}
},
}
}
}
</script>
<style scoped>
img{width: 100%}
</style>在页面中使用组件
1
2
3
4
5
6
7
8
9
10
11
12<Swiper :swiperSlides="sliders"></Swiper>
<script>
import Swiper from '@/base/Swiper/Swiper.vue'
export default {
data(){
return {
sliders: [] //图片数据
}
},
}
</script>
