Vue-swiper组件封装

Vue-swiper组件封装

Vue封装swiper组件的方法

方法一：添加v-if判断是否创建DOM结构

在发送ajax请求回数据之前不创建DOM结构，等ajax请求回数据后创建DOM结构

<div id="box">
    <swiper v-if="datalist.length" :loop="true">
        <swiper-item v-for="data in datalist" :key="data">
            <img :src="data" />
        </swiper-item>
    </swiper>
</div>
<script>
    Vue.component("swiperItem", {
        template: `
                <div class="swiper-slide">
                    <slot></slot>
                </div>
                `
    })
    Vue.component("swiper", {
        props: {
            loop: {
                type: Boolean,
                default: true
            }
        },
        template: `
                <div class="swiper-container kerwin">
                    <div class="swiper-wrapper">
                    <slot></slot>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>`,
        mounted() {
            // console.log("mounted")
            new Swiper(".kerwin", {
                // direction:"vertical", //垂直
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                loop: this.loop,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                }
            })
        },
        destroyed() {
            // console.log("destroy")
        }
    })
    new Vue({
        el: '#box',
        data: {
            datalist: []

        },
        mounted() {
            setTimeout(() => {
                this.datalist = ["https://static.maizuo.com/pc/v5/usr/mo