對於swiper組件的二次封裝

簡介

爲了方便swiper的使用，對swiper進行二次封裝，方便開發人員進行使用。

下載swiper

up下載的"swiper": "^4.5.1"。

npm i swiper@4.5.1複製代碼

引入

在components中建立baseSwiper文件夾，文件夾下建立index.vue文件。 使用swiper組件須要引入

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min.js'複製代碼

進行封裝

template中

<template>
  <div class="swiper-container" :id="swiperId">
    <div class="swiper-wrapper">
      <div class="swiper-slide" @click="swiperFn(item)" :style="{width:imgWidth,height:imgHeight}" v-for="(item, index) in imgList" :key="index">
        <div class="img_box" :style="{'background-image':'url('+item.imgSrc+')'}"></div>
      </div>
    </div>
    <!-- Add Pagination -->
    <div v-if="isBot" class="swiper-pagination swiper-pagination-white" id="swiper-spit"></div>
    <!-- Add Arrows -->
    <div v-if="isNavigation" class="swiper-button-next swiper-button-white"></div>
    <div v-if="isNavigation" class="swiper-button-prev swiper-button-white"></div>
  </div>
</template>複製代碼

js代碼

<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min.js'
export default {
  data() {
    return {
      obj: {}
    };
  },
  methods: {

  },
  props: {
    //組件id，同一頁面重複
    swiperId:{
      type: String,
      default: "swiper-container"
    },
    //圖片寬度
    imgWidth: {
      type: String,
      default: "500px"
    },
    //圖片高度
    imgHeight: {
      type: String,
      default: "300px"
    },
    //圖片list
    imgList: {
      type: Array,
      default: ()=>{
        return []
      }
    },
    //切換時間
    delay: {
      type: Number,
      default: 3000
    },
    //自動切換
    autoplay: {
      type: Boolean,
      default: true
    },
    //觸碰後自動中止
    disableOnInteraction: {
      type: Boolean,
      default: false
    },
    //環路
    loop: {
      type: Boolean,
      default: true
    },
    //分頁器開關
    isBot: {
      type: Boolean,
      default: true
    },
    //按鈕開關
    isNavigation: {
      type: Boolean,
      default: true
    },
    //其餘配置
    diff: {
      tepe: Object,
      default: ()=>{
        return {}
      }
    }
  },
  created() {

  },
  mounted() {
    if (this.autoplay) {
      this.obj = {
        //環路
        loop: this.loop,
        //自動切換
        autoplay: {
          //切換時間
          delay: this.delay,
          disableOnInteraction: this.disableOnInteraction
        },
        //分頁器
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      }
    }

    if (!this.autoplay) {
      this.obj = {
        //環路
        loop: this.loop,
        //自動切換
        autoplay: false,
        //分頁器
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      }
    }
    //合併其餘配置
    let swiperObj = Object.assign(this.obj, this.diff)

    var swiper = new Swiper('#'+ this.swiperId, swiperObj)
  },
  methods: {
    swiperFn(item){
      this.$emit("click",item)
    }
  },
};
</script>複製代碼

把基本的數據進行了簡單的封裝，預留一個diff，若是有其餘的配置寫在diff對象中，用Object.assign進行合併。

樣式

<style scoped lang='scss'>
.swiper-container {  width: 100%;
  height: 100%;
}

.img_box {  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>複製代碼

在頁面中應用

import BaseSwiper from "@/components/index.vue";複製代碼

components: { BaseSwiper }複製代碼

<!-- 輪播圖 --><div class="swiper_box">  <base-swiper v-bind="swiperList1" @click="swiperFn"></base-swiper></div>複製代碼

//輪播1  swiperList1: {swiperId: "swiper1",imgList: [
          {id: 0,imgSrc: require("@/assets/images/bg1.png")
          },
          {id: 1,imgSrc: require("@/assets/images/bg2.png")
          }
        ],imgWidth: "500px",imgHeight: "300px"  }複製代碼

    swiperFn(obj) {      console.log(obj);
    }複製代碼

注意：一個頁面應用多個組件的時候，swiperId的命名必定要不同，不然組件會互相沖突。