Vue组件(一)——Swiper轮播组件

Vue轮播组件，详情参见： awesome-swiper

1. vue项目中安装awsome-swiper组件：      npm  install   [email protected]  --save 
   (@2.6.7是组件的版本号)
2. 全局使用swiper插件，需要在main.js文件中引入swiper插件

   import Vue from 'vue'
   import VueAwesomeSwiper from 'vue-awesome-swiper'
   // require styles
   import 'swiper/dist/css/swiper.css'
   
   
   Vue.use(VueAwesomeSwiper)

3. 轮播组件

   <template>
     <div class="wrapper">
       <swiper :options="swiperOption" v-if="showSwiper">
         <swiper-slide v-for="item of list" :key="item.id">
           <img class="swiper-img" :src="item.imgUrl"/>
         </swiper-slide>
         <div class="swiper-pagination"  slot="pagination"></div>
       </swiper>
     </div>
   </template>
   
   <script>
   export default{
     name: 'HomeSwiper',
     props: {
       list: Array
     },
     data () {
       return {
         swiperOption: {
           pagination: '.swiper-pagination',
           loop: true
         }
       }
     },
     computed: {
       showSwiper () {
         return this.list.length
       }
     }
   }
   </script>
   
   <style lang="stylus" scoped>
     .wrapper >>> .swiper-pagination-bullet-active
         background: #fff !important
     .wrapper
       overflow: hidden
       width: 100%
       height: 0
       padding-bottom: 26.67%
       .swiper-img
         width: 100%
         background: #eee
   </style>
   

4. 父组件引入轮播插件，并完善swiperList对象数组（JSON格式）

   <template>
     <div>
       <home-swiper :list="swiperList"></home-swiper>
     </div>
   </template>
   
   <script>
   import HomeSwiper from './components/Swiper'
   export default{
     name: 'Home',
     components: { // 声明组件
       HomeSwiper: HomeSwiper
     },
     data () {
       return {
         swiperList: [],
       }
     }
   }
   </script>