vue里使用swiper分页器功能并可以自定义样式

之前使用swiper-pagination总是渲染不出来

解决方法：

<template>
        <div>
            <div class="swiper-pagination" slot="pagination" >
                //这里是实现自定义样式的地方，一个span就是一个点
                <span class="swiper-pagination-bullet" οnmοuseοver="this.click()"></span>
                <span class="swiper-pagination-bullet" οnmοuseοver="this.click()"></span>
                <span class="swiper-pagination-bullet" οnmοuseοver="this.click()"></span>
            </div>
            <swiper :options="swiperOption">
                <swiper-slide v-for="(item,index) in imglist" :key="index" >
                    <img style="width: 100%; height: 100%;" :src="item.url" >
                </swiper-slide>
            </swiper>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                imglist: [
                    {url: require('../assets/img/binner.png')},//自己更换图片
                    {url: require('../assets/img/binner2.jpg')},
                    {url: require('../assets/img/binner2.jpg')}
                ],
                swiperOption: {
                    direction: "horizontal",
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                         type: "custom",
                    }
                },
            }
        }
    }
</script>

<style lang="less" scoped>
   .swiper-pagination {
        position: relative;
        width: 90%;
        left: 5%;
    }
</style>

效果：