vue封裝一個swiper組件

首先在頁面內引入swiper腳本，包括css、js

<!-- swiper -->
    <link href="https://cdn.staticfile.org/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">

<!-- swiper -->
    <script src="https://cdn.staticfile.org/Swiper/4.5.1/js/swiper.min.js"></script>

另外需要在eslint中配置，將swiper對象配置成全局對象

 

 在components文件中寫一個swiper組件

 

 

<template>
    <div>
        <div :class="swpName +' swiperBox '+ className">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,key) in list" :key="'swiperSlide'+key">
                    <a v-if="item.link != undefined" :href="item.link" class="bannerItem">
                        <img :src="item.src" alt="">
                    </a>
                    <div v-else class="bannerItem"><img :src="item.src" alt=""></div>
                </div>
            </div>
            <div v-if="isPrevNext == true" :class="swpName + 'prev swiper-button-prev swiper-button-'+ prevNextColor" slot="button-prev"></div>
            <div v-if="isPrevNext == true" :class="swpName + 'next swiper-button-next swiper-button-'+ prevNextColor" slot="button-next"></div>
            <div v-if="isPagination == true" :class="'swiper-pagination'"></div>
        </div>
    </div>
</template>

<script>
export default {
    
    props: {
        //輪播圖列表數據
        list: {
            type: Object,
            default: function(){
                return []
            }
        },
        //樣式名稱
        className: {
            type: String,
            default: ''
        },
        prevNextColor: {
            type: String,
            default: ''
        },
        //是否顯示圓點
        isPagination: {
            type: Boolean,
            default: false
        },
        //是否顯示左右箭頭
        isPrevNext: {
            type: Boolean,
            default: false
        },
        //自動播放延遲多少毫秒
        delay: {
            type: String,
            default: '3000'
        },
        //是否循環切換
        loop: {
            type: Boolean,
            default: true
        },
        //是否自動播放
        autoPlay: {
            type: Boolean,
            default: true
        },
        // 一屏顯示幾個
        slidesPerView:{
            type:Number,
            default:1
        },
        //每個輪播間的間隔距離
        spaceBetween:{
            type:Number,
            default:0
        },
        //導航點樣式
        paginationType:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            swpName: this.roundString(),
            MySwiper:null,//swiper實例
        }
    },
    mounted(){
        var self=this;
        self.MySwiper = new Swiper ('.'+ self.swpName,{
            init: true,
            observer:true,
            observeParents:true,
            slidesPerView: self.slidesPerView,
            spaceBetween: self.spaceBetween,
            keyboard: {
                enabled: true,
            },
            loop: self.loop,
            autoplay:self.autoPlay? {delay: self.delay,disableOnInteraction: false}:false,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                type:self.paginationType?self.paginationType:'bullets'
            },
            navigation: {
                nextEl: '.'+self.swpName + 'prev',
                prevEl: '.'+self.swpName + 'next'
            },
        });
    },
    methods: {
        roundString() {
            let str = "";
            let chars = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
            chars.forEach(() => {
                str += chars[Math.ceil(Math.random()*25)]
            });
            return str
        }
    },
}
</script>

<style lang="scss" scoped>
@import url("../assets/css/swiperBullet.css");
</style>

注意到上面組件內需要引入一個swiperBullet.css樣式，之所以這樣引入，是可以自定義導航點

swiperBullet.css放在assets文件夾下

.swiperBox{
    width:100%;
    position: relative;
    overflow: hidden;
}
.swiperBox .bannerItem img{
    height:auto;
    width:100%;
}
.swiperBox .bannerItem{
    width:100%;
    text-align: center;
}
.swiperBox .bannerItem img{
    height:auto;
    width:100%;
}
.swiper-pagination{
    position: absolute;
}
/* 輪播導航點配置 */
.swiper-pagination .swiper-pagination-bullet {
    width: 0.1rem;
    height: 0.1rem;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color:#000;
    opacity: 1;
    background: rgba(0,0,0,0.2);
    margin-right:20px;
    outline: none;
}
.swiper-pagination .swiper-pagination-bullet:last-child{
    margin-right:0;
}
.swiper-pagination .swiper-pagination-bullet-active {
    color:#fff;
    background: #005aab;
}

在頁面中使用：

import SwiperCmp from "@/components/swiperComponent";

components:{SwiperCmp},

<div class="banner_box">
          <SwiperCmp :list="bannerList" :isPagination="true" :className="'swiperClass'"/>
        </div>

自定義導航點樣式：

.banner_box{
    /deep/.swiperClass{
      height:3rem;
      .swiper-pagination{
        bottom:1rem;
        //這里可以自定義導航點的樣式
      }
    }
  }

 

 

 

 

。