vue3中使用swiper自定义pagination

介绍

在 vue3 中使用 swiper, 实现轮播图的效果；默认的 分页器是以小圆点的形式显示，但是很多时候会用到自定义分页器，这就需要修改内置的参数进行配置；
例如，如下所示，需要通过 swiper实现时间轴，然后分页器就需要自定义成具体的时间；

代码

 import {
    
     Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/css/pagination' 
 import {
    
    Pagination} from 'swiper'
  const pagination = ref({
    
    
    el: ".swiper-pagination",
    clickable: true,
    type: 'custom',
      renderCustom:function(swiper,current,total){
    
    
      var paginationHtml = '';
      var text = ['2014','2015','2016','2017','2018','2019'];
      for(var i=1;i<=total;i++){
    
    
        if(i==current){
    
    
          paginationHtml+=` <span class='pagination_text swiper-pagination-bullet swiper-pagination-bullet-active'>${
      
      text[i-1]}</span>`
        }else{
    
    
          paginationHtml+=`<span class='pagination_text swiper-pagination-bullet'>${
      
      text[i-1]}</span>`
        }
      };
      return paginationHtml
    }
  })