vue封装swiper组件

swiper组件封装

swiper(轮播图)组件是我们常用的功能组件，为了方便开发我们可以将它封装起来，方便我们下次使用。

swiper.vue组件

<template>
    <div class="swiper-container" :class="cName">
        <div class="swiper-wrapper">
            <slot></slot>
        </div>
    </div>
</template>

<script>
//引入swiper的css样式 如果没有 通过npm i swiper 安装
import "swiper/css/swiper.min.css"
export default {
    props:["cName"]
}
</script>

<style>

</style>

引入swiper.vue

在views文件夹下 选择需要轮播图的vue组件引入 swiper

<template>
    <div class="films">
        <Swiper cName="swipe">
            <div 
                class="swiper-slide"
                v-for="(banner,index) in banners"
                :key="banner.bannerId"
                v-swiper="{
                    current:index,
                    length:banners.length,
                    swipe:'swipe'
                    }"
            >
                <img :src="banner.imgUrl" alt="">
            </div>
        </Swiper>
        <div>
            导航栏
        </div>
        <!--路由容器-->
        <router-view></router-view>
    </div>
</template>
<script>
//引入Swiper组件
import Swiper from "@/components/Swiper"
import axios from "axios"
import instance from "@/utils/http"
import { inspect } from 'util';
export default {
    components:{
        Swiper  //注册组件Swiper
    },
    data(){
        return {
            banners:[]
        }
    },
    created(){
        //请求数据
        instance.get("/gateway?type=2&cityId=310100&k=3419992",{
            headers:{
                'X-Host': 'mall.cfg.common-banner'
            }
        }).then(res=>{
            console.log(res)
            this.banners = res.data.data
            //必须要等到页面中出现了swiper-slide结构后，我们才能进行实例化的操作
            // this.$nextTick(()=>{
            //     new Swip(".swiper-container")
            // })

        })


    }
}
</script>
<style lang="scss" scoped>
    .swiper-slide{
        img{
            width:100%
        }
    }
</style>

给untils文件夹添加 axios工具 用来进行数据请求

import axios from "axios"
const instance = axios.create({
    baseURL: 'https://m.maizuo.com', //基本的url
    timeout: 3000,  //延时默认3秒
    headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15587791402160368550306","bc":"310100"}'
    }  //请求头
});
export default instance

untils添加 directives工具

后续只需要实例化的时候添加自定义指令 v-swiper="{current:XXX,length:XXX,swipe:XXX}"

import Vue from "vue"
import Swiper from "swiper"
Vue.directive("swiper",{
    inserted(el,binding,vnode){
        // 这个地方是通过vnode.context获取到vue实例，然后就可以通过这个实例.datalist.length获取到数组的长度了
        // console.log(vnode.context.datalist.length)
        //代表最后一个元素插入完毕了，再进进行一次实例化操作就可以了
        if(binding.value.current === binding.value.length-1){
            //如果外部 {current,length,swipe:'swipe'}
            //new Swiper("."+binding.value.swipe,{.....})
            new Swiper("."+binding.value.swipe,{ 
                loop:true,
                autoplay:true,
                pagination:{
                    el:".swiper-pagination"
                }
            })
        }
    }
})

最后在 main.js引入directives
在main.js添加代码import "./utils/directives"