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.