Nuxt Swiper使用

注：以下以按需引入为例

网址：

swiper： https://www.swiper.com.cn/api/parameters/17.html

vue-awesome-swiper：  https://github.com/surmon-china/vue-awesome-swiper/tree/v4.1.1

1、swiper、vue-awesome-swiper 安装

// 稳定版本：
npm i swiper@5.4.5
npm i vue-awesome-swiper@4.1.1

2、创建 swiper 组件 /components/swiper.vue

<!-- **
    * @author X-Bear
    * @description swiper组件
** -->
<!-- **
    * @use <yfn-swiper></yfn-swiper>
    * @params参数说明：
    * @params {name}             swiper组件名称，值唯一，默认 swiper1
    * @params {list}             swiper组件数据 [必]，[注：list 内存在 hasVisible: false，则不渲染当前项]
    * @params {swiper-style}     swiper样式
    * @params {wrapper-style}    swiper-wrapper样式
    * @params {slide-style}      swiper-slide样式
    * @params {options}          继承swiper组件配置选项，具体查看 https://www.swiper.com.cn/api/parameters/42.html
    * @params {options.hasPag}   是否显示分页，默认 false
    * @params {options.hasNav}   是否显示前置/后置按钮，默认 false
** -->
<!-- **
    * @slots插槽：
    * @slots {pag}               分页
    * @slots {nav}               前一页/后一页
    * @slots {slide}             自定义swiper滑块内容 -> <template #slide="{ props }">自定义内容</template>，props指代list项数据
    * @slots {wrapper}           wrapper插槽
** -->
<!-- **
    * @events事件：
    * @events {emit-get-initial} 获取 swiper 实例
** -->
<template>
    <div class="YfnSwiper">
        <div v-swiper:[name]="{
            ...options,
            pagination: options.hasPag || options.pagination ? {...def.pt, ...options.pagination} : {},
            navigation: options.hasNav || options.navigation ? {...def.nt, ...options.navigation} : {}
        }" :class="name" :style="swiperStyle" :ref="name">
            <div class="swiper-wrapper" :style="wrapperStyle">
                <template v-for="(item, i) in list">
                    <div class="swiper-slide" v-if="item.hasVisible !== false" :style="slideStyle">
                        <div class="YfnSwiper-section">
                            <template v-if="$scopedSlots.slide">
                                <slot name="slide" v-bind:props="{...item, $index: i}"></slot>
                            </template>
                            <template v-else>
                                <van-image
                                    width="100%"
                                    height="auto"
                                    fit="cover"
                                    :show-loading="false"
                                    :lazy-load="i && i < list.length - 1 ? true : false"
                                    :src="item.url + '?x-oss-process=image/resize,w_750'"></van-image>
                            </template>
                        </div>
                    </div>
                </template>
                <slot name="wrapper"></slot>
            </div>
            <template v-if="options.hasPag || options.pagination">
                <div class="swiper-pagination"></div>
            </template>
            <template v-if="options.hasNav || options.navigation">
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </template>
            <slot name="pag"></slot>
            <slot name="nav"></slot>
        </div>
    </div>
</template>

<script>
import { directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.min.css'

export default {
    name: 'YfnSwiper',
    directives: {
        swiper: directive
    },
    props: {
        list: Array,
        swiperStyle: {
            type: Object,
            default: () => {
                return {}
            }
        },
        wrapperStyle: {
            type: Object,
            default: () => {
                return {}
            }
        },
        slideStyle: {
            type: Object,
            default: () => {
                return {}
            }
        },
        options: {
            type: Object,
            default: () => {
                return {}
            }
        },
        name: {
            type: String,
            default: () => {
                return 'swiper1'
            }
        }
    },
    data() {
        return {
            def: {
                pt: {el: '.swiper-pagination', clickable :true},
                nt: {prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next'}
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.getSwiper()
    },
    methods: {
        getSwiper() {
            this.$emit('emit-get-initial', this[this.name])
            return this[this.name]
        }
    },
}
</script>

<style scoped lang='scss'>
.YfnSwiper{
    :deep(.van-image){
        display: flex;
    }
}
:deep(.swiper-pagination-bullet) {
    width: 6px;
    height: 6px;
    &-active{
        width: 12px;
        border-radius: 24px;
        background: #fff;
    }
}
</style>

3、使用组件

<yfn-swiper :list="item.yfnOrderItem" :options="{slidesPerView: 'auto', spaceBetween: 6}">
                        <template #slide="{ props }">
                            <div class="OrderListSection-img">
                                <yfn-image :src="props.mainPic" width="72px" height="72px"></yfn-image>
                            </div>
                        </template>
                    </yfn-swiper>