vue3使用swiper指示灯控制

### Vue3 中 Swiper 实现指示灯控制

在 Vue3 项目中集成并配置 Swiper 组件来实现带有指示灯功能的轮播图，可以按照如下方式操作：

#### 安装依赖库
首先，在项目根目录执行命令安装 `swiper` 和其样式文件。

npm install swiper @types/swiper vue-awesome-swiper --save

对于最新版本的 Swiper 可能不需要单独安装 `@types/swiper` 或者 `vue-awesome-swiper`，具体取决于所使用的包管理工具以及目标环境的要求[^1]。

#### 创建组件结构
定义一个新的 Vue 单文件组件用于展示 Swiper 轮播效果。确保导入必要的模块和 CSS 文件，并初始化 Swiper 的实例对象。

<template>
  <div class="swiper-container">
    <!-- Swiper -->
    <div ref="mySwiper" :class="'swiper-wrapper'">
      <div v-for="(slide, index) in slides" :key="index" class="swiper-slide">{{ slide }}</div>
    </div>

    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Swiper as SwiperClass, Navigation, Pagination } from 'swiper';

// 导入 Swiper 样式
import 'swiper/css/bundle';

const mySwiper = ref(null);
const slides = ['Slide 1', 'Slide 2', 'Slide 3'];

onMounted(() => {
  new SwiperClass(mySwiper.value, {
    modules: [Navigation, Pagination],
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true // 设置为true可以让用户点击圆点切换图片
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
  });
});
</script>

<style scoped>
/* 自定义样式 */
.swiper-container {
  width: 60%;
  height: 300px;
}
</style>

此代码片段展示了如何通过 TypeScript 编写一个简单的 Swiper 组件，其中包含了基本的功能设置如循环播放、上下翻页箭头及可点击的小圆圈作为页面索引[^2]。