vue遇到vue-awesome-swiper遇到的各种坑

1、安装vue-awesome-swiper

会同时安装vue-awesome-swiper和swiper到node_modules文件夹下

npm install vue-awesome-swiper

2.引入

同时引入样式文件夹
main.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

HomeSwiper.vue当前使用的文件夹

<script>
    import {swiper, swiperSlide} from 'vue-awesome-swiper'

    export default {
        components: {
            swiper, swiperSlide
        }
    }
</script>

全部代码

HomeSwiper.vue

<template>
    <div>
        <swiper :options="swiperOption"
                v-if="banners.length>0"
                ref="mySwiper"
                @mouseenter.native="onEnter"
                @mouseleave.native="onLeave">
            <swiper-slide v-for="item in banners" :key="item.title">
                <a href="item.link">
                    <img :src="item.image">
                </a>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>

</template>

<script>
    import {swiper, swiperSlide} from 'vue-awesome-swiper'

    export default {
        name: "HomeSwiper",
        components: {
            swiper, swiperSlide
        },
        props: {
            banners: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        data() {
            return {
                swiperOption: {
                    notNextTick: true,
                    observer: true,
                    observeParents: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    loop: true,
                    autoplay: {
                        disableOnInteraction: false,
                    },
                }
            }
        },
        methods: {
            onEnter() {
                this.mySwiper.autoplay.stop()

            },
            onLeave() {
                this.mySwiper.autoplay.start()
            }
        },
        computed: {
            //获取可以操作的swiper
            mySwiper() {
                return this.$refs.mySwiper.swiper
            }
        }
    }
</script>

home.vue引入HomeSwiper

<template>
    <div id="home">
        <nav-bar class="home-nav">
            <div slot="center">购物街</div>
        </nav-bar>
        <home-swiper :banners="banners"></home-swiper>
    </div>
</template>
<script>
    import NavBar from 'components/common/navbar/NavBar'
    import HomeSwiper from './childComps/HomeSwiper'
</script>

说说这里遇到的坑

1pagination没有显示

模板
:options=swiperOption
slot=pagination
swiperOPtions
pagination写成参数形式

2.自动切换且循环

模板
v-if=“banners.length>0”
swiperOPtions
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
如果鼠标操作后轮播图继续切换需要将autoplay：true修改为
autoplay: {
disableOnInteraction: false,
},

3.鼠标悬停事件

因为没有找到方法所以自己写的
模板
ref=“mySwiper”
添加事件(因为是在组件上使用所以加.native)
@mouseenter.native=“onEnter”
@mouseleave.native=“onLeave”>
swiperOptions
notNextTick: true//可以第一时间获取到swiper对象
在计算属性当中通过$refs获取实例
在方法声明鼠标移入事件和鼠标移出事件