vue3中使用paginationBulletRender修改swiper分液器样式

在 Vue3 中使用 PaginationBulletRender 修改 swiper 分页器样式可以按照以下步骤进行：

1. 在组件中引入 swiper 的样式文件和 swiper 组件：

import 'swiper/swiper-bundle.css';
import SwiperCore, { Pagination } from 'swiper/core';
import { Swiper, SwiperSlide } from 'swiper/vue';

SwiperCore.use([Pagination]);

2. 在 `Swiper` 组件中添加 `pagination` 属性，并设置 `bulletRender` 属性为一个函数，该函数的参数为当前分页器的索引（从0开始），返回一个 HTML 字符串表示分页器的内容：

<Swiper :pagination="{ bulletRender: customBulletRender }">
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

3. 在组件中定义 `customBulletRender` 函数，根据需要生成分页器的 HTML 字符串：

export default {
  methods: {
    customBulletRender(index, className) {
      return `<span class="${className}">${index + 1}</span>`;
    },
  },
};

在这个例子中，`customBulletRender` 函数将每个分页器的内容设置为一个数字，样式类名为 `className`。

这样就可以使用 `PaginationBulletRender` 来修改 swiper 分页器样式了。