vue 組件式開發swiper

必須要先安裝npm install  vue-awesome-swiper

//組件
<template>
    <div class="my-swiper">
    <swiper :optops="swiperOption" class="swiper-menu">
      <swiper-slide><img src="~assets/img/home.png" alt=""/></swiper-slide>
      <swiper-slide><img src="~assets/img/home_1.png" alt=""/></swiper-slide>
      <swiper-slide><img src="~assets/img/home_3.png" alt=""/></swiper-slide>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
    </div>
  </div>
  
</template>


<script>

export default {
  name:'MySwiper',
  data(){
    return{
      swiperOption:{
        loop:true
      }
    }
  }
  
}
</script>

<style>
    .my-swiper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide img{
      overflow: hidden;
      width: 100%;
      height: 100%;;
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      /* display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex; */
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      padding: 3px;
      border-bottom: 1px solid #ffffff

    }

</style>

 

//父組件使用
<div class="home-view">
      <my-swiper></my-swiper>
      <feature class="feature"></feature>
    </div>   


import MySwiper from '../swiper/Swiper'

 swiper作為組件應該是由父組件來控制是圖片還是其他控件 ，然後在基礎上進行封裝

//父組件 

 <swiper :optops="swiperOption" class="swiper-menu">
      <swiper-slide><img src="~assets/img/home.png" alt=""/></swiper-slide>
      <swiper-slide><img src="~assets/img/home_3.png" alt=""/></swiper-slide>
      <swiper-slide><img src="~assets/img/home_1.png" alt=""/></swiper-slide>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
 </swiper>




//子組件，使用插槽方式，方便父子件安裝需求添加所需的控件

<swiper>
      <swiper-slide><slot></slot></swiper-slide>
      <swiper-slide><slot></slot></swiper-slide>
      <swiper-slide><slot></slot></swiper-slide>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>