vue3 swiper添加左右箭头

### 如何在 Vue3 中为 Swiper 添加左右导航箭头

#### 配置方法及示例代码

为了在 Vue3 项目中使用带有左右导航箭头的 Swiper 组件，可以按照以下方式配置：

1. 安装 `swiper` 和其样式文件。

npm install swiper @vue/composition-api

2. 创建并配置 Swiper 组件，在模板部分定义两个按钮作为导航箭头，并通过 props 将它们传递给 Swiper 实例。

<template>
  <div class="swiper-container">
    <!-- 导航箭头 -->
    <button ref="prevButton" class="swiper-button-prev">Previous</button>
    <button ref="nextButton" class="swiper-button-next">Next</button>

    <swiper :options="swiperOption">
      <swiper-slide v-for="(slide, index) in slides" :key="index">{{ slide }}</swiper-slide>
    </swiper>
  </div>
</template>

3. 在脚本部分引入必要的模块，并设置 Swiper 的选项以启用导航功能。这里需要注意的是要指定前后按钮对应的 DOM 节点。

<script setup>
import { onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation } from 'swiper';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';

const prevButton = $ref(null);
const nextButton = $ref(null);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      
      swiperOption: {
        modules: [Navigation],
        navigation: {
          prevEl: prevButton,
          nextEl: nextButton,
        }
      }
    };
  },

  mounted() {
    this.swiperOption.navigation.prevEl = this.$refs.prevButton;
    this.swiperOption.navigation.nextEl = this.$refs.nextButton;
  }
};
</script>

上述代码展示了如何创建一个简单的轮播图组件，并为其添加左右方向控制按钮[^1]。此实现利用了 Swiper 提供的功能以及 Vue 对响应式特性的支持来构建交互式的用户体验。