vue-awesome-swiper-T 轮播图

官网

https://www.swiper.com.cn/

 

安装依赖

npm install swiper vue-awesome-swiper --save

 

直接在页面中使用

<template>
    <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
    </swiper>
</template>

<script>
    import {
        Swiper,
        SwiperSlide,
        directive
    } from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    // import 'swiper/swiper-bundle.css' 
　　export default {
        name: 'carrousel',
        data() {
            return {
                swiperOptions: {
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    // Some Swiper option/callback...
                }
            }
        },
        components: {
            Swiper,
            SwiperSlide
        },
        directives: {
            swiper: directive
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        mounted() {
            console.log('Current Swiper instance object', this.swiper)
        }
    }
</script>

 

部分报错解决

报错  Error in render: "TypeError: Cannot set property 'params' of undefined"  

与版本号有关系，4.0 版本首字母大写，3.0版本，首字母小写。

4.0

import {

        Swiper,
        SwiperSlide,
        directive
    } from 'vue-awesome-swiper'