vue中使用swiper

对swiper的简单封装（可复用） 主要是在vue中使用swiper
引入所需文件 swiper的css js vue.js

<div id="app">
<!-- 用key 或者v-if 都可 -->
   <!-- <swiper :key="dataList.length">
     <div class="swiper-slide" v-for="item in dataList">
       {{item}}
     </div>
     <template #pagination>
       <div class="swiper-pagination"></div>
     </template>
   </swiper> -->
   <swiper v-if="dataList.length" :myoptions="{loop:true}">
     <div class="swiper-slide" v-for="item in dataList">
       {{item}}
     </div>
     <template #pagination>
       <div class="swiper-pagination"></div>
     </template>
   </swiper>
 </div>

<script type="text/javascript">
   Vue.component('swiper',{
     props:["myoptions"],
     template:`
       <div class="swiper-container box">
         <div class="swiper-wrapper">
           <slot></slot>
         </div>
         <slot name="pagination"></slot>
       </div>
     `,
     mounted() {
       console.log("myoptions",this.myoptions)
       var baseoptions = {
             loop: false,
             pagination: {
               el: '.swiper-pagination',
             },
           }
       new Swiper('.swiper-container', Object.assign(baseoptions,this.myoptions));
     }
   })
   var vm = new Vue({
     el: '#app',
     data: {
       dataList: [],
     },
     mounted() {
       setTimeout( ()=> {
         this.dataList = ["aaa","bbb","ccc"]
       },2000)
     },
   })
 </script>

    .swiper-container {
      width: 600px;
      height: 300px;
    }
    .swiper-container img {
      width: 100%;
    }