Introduction to the

To facilitate the use of swiper, the swiper is encapsulated for developers.

Download swiper

Up downloaded “swiper”: “^4.5.1”.

NPM I [email protected]Copy the code

The introduction of

Create the baseSwiper folder in Components and create the index.vue file under that folder. The Swiper component needs to be imported

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min.js'
Copy the code

encapsulate

In the 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>Copy the code

Js code

<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: {// Component id, props: {type: String, default: "swiper-container"}, // Image width imgWidth: ImgHeight: {type: String, default: "300px"}, // image list imgList: {type: String, default: "500px"}, // image list imgList: {type: String, default: "500px"}, // image list imgList: {type: Array, default: ()=>{return []}}, // Switch time delay: {type: Number, default: 3000}, // Auto switch autoplay: {type: Boolean, default: true}, // disableOnInteraction: {type: Boolean, default: false}, // Loop: {type: Boolean, default: true}, // Pager switch isBot: {type: Boolean, default: true}, // button switch isNavigation: {type: Boolean, default: true}, // other configuration diff: {tepe: Object, default: () = > {return {}}}}, created () {}, mounted () {if (this. The autoplay) {this. Obj = {/ / the loop loop: This. Loop, // Auto switch autoplay: {// Switch time delay: this. Delay, disableOnInteraction: Enclosing disableOnInteraction}, / / pager 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 ',},} // Merge other configurations let swiperObj = object.assign (this.obj, this.diff) var swiper = new Swiper('#'+ this.swiperId, swiperObj) }, methods: { swiperFn(item){ this.$emit("click",item) } }, }; </script>Copy the code

The basic data is simply encapsulated, reserving a DIff. If other configurations are written to the DIff Object, use object. assign to merge them.

style

<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>
Copy the code

Apply to the page

import BaseSwiper from "@/components/index.vue";
Copy the code
components: { BaseSwiper }
Copy the code
<! -- Rotation chart --><div class="swiper_box">
      <base-swiper v-bind="swiperList1" @click="swiperFn"></base-swiper>
    </div>
Copy the code
/ / by 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"
      }
Copy the code
    swiperFn(obj) {
      console.log(obj);
    }
Copy the code

Note: When applying multiple components to a page, the swiperId name must be different, otherwise the components will conflict with each other.