改变vue-awesome-swiper的pagination分页器样式

环境：

vue-awesome-swiper^2.6.7

swiper^3.4.2

成品图：

功能：拖动或者切换下一个pagination点点宽度跟着过渡变换

代码:

<template>
  <div class="m-topic-swiper">
    <swiper :options="swiperOption" :class="special">
      <swiper-slide v-for="(item, index) in content" :key="index">
        <router-link :to="url">
        <img class="m-topic-img" :src="item.imageUrl" alt="">
        </router-link>
      </swiper-slide>
      <div class="swiper-pagination" id="pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

js:

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
    name: 'm-topic-swiper',
    props: ['content', 'special'],
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {  // 可写swiper一些原生配置
          pagination: '.swiper-pagination',
          loop: true,
          watchSlidesProgress : true,
          autoplay: 3000,
          speed: 600,
          onProgress: (swiper, progress) => { //进度函数返回拖动进度
            let n = this.content.length
            let test = document.getElementById('pagination')
            if (test) {
              progress = parseInt((((progress - 1 / (n + 1)) / n * (n + 1)) * 100).toFixed(0)) //swiper3.XX版本不是从0开始，修正一下progress
              if(progress < 0){
                progress = 100 + progress
              }
              let nowNumber = Math.floor(progress * n / 100) === n ? n - 1 : Math.floor(progress * n / 100) //找出当前点点
              let percent = (progress / 100 - (nowNumber / n)) * n //拖动占总份额多少
              let nextNumber = nowNumber + 1   //下一个要变化的点点
              if(nowNumber === n - 1){
                nextNumber = 0
              }
              let now = test.children[nowNumber]
              let next = test.children[nextNumber]
              let maxWidth = 0.3         // 点点最大宽度
              let minWidth = 0.08        //点点最小宽度
              let dif = maxWidth - minWidth
              next.style.width = dif * percent + minWidth + 'rem'
              now.style.width = dif * (1 - percent) + minWidth + 'rem'
              for(let i = 0; i < test.children.length; i++) {
                if(i !== nowNumber && i !== nextNumber){
                  test.children[i].style.width = minWidth + "rem"  //防止拖动的太快数据丢失遍历给每个点点最小宽
                }
              }
            }
          }
        },
      }
    },
}

css:

<style lang="postcss">
  .m-topic-swiper {
    .swiper-container {
      width: 100%;
        .m-topic-img {
          display: block;
          width: 100%;
        }
      .swiper-pagination {
          height: .23rem;
          font-family: PingFangSC-Regular;
          font-size: .156rem;
          color: #fff;
          letter-spacing: 0;
          line-height: .12rem;
          bottom: 0;
      }
      .swiper-pagination-bullet {
        background: #fff;
        opacity: 0.8;
        height: 0.08rem;
        border-radius: 0.06rem;
        width: 0.08rem;
        transition: all 0.2s; //可设置缓慢变化
      }
      .swiper-pagination-bullet-active {
            width: 30px;
          }
    }
  }
</style>

收工~~~