对于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的命名必定要不同，不然组件会互相冲突。