可以使用参考来选择swiper方法

Question

我正在尝试调用.slidenext（）＆amp;当用户按下箭头键时，swiper随附的slideprev。

我设法使用像这样的Querylesector来完成此操作：

const changeSlide = (event: KeyboardEvent) => {

    const slides = document.querySelector('.swiper').swiper

    if(event.key === 'ArrowLeft') {
      slides.slidePrev();
    } else if (event.key === 'ArrowRight') {
      slides.slideNext();
    }

}

但是，此方法通常不允许使用该项目来产生警告，并且该项目的使用不允许使用。因此，相反，我不是要使用ref选择刀片，但我还没有成功。

这就是我尝试的：

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
// just some imports that are needed

const swiperRef = ref();
// swiper as ref

const changeSlide = (event: KeyboardEvent) => {

    const slides = swiperRef.value.swiper
    // instead of querySelector i use the ref.value

    if(event.key === 'ArrowLeft') {
      slides.slidePrev();
    } else if (event.key === 'ArrowRight') {
      slides.slideNext();
    }

}
</script>

<template>
<swiper
  ref="swiperRef"
  :initial-slide="props.initialSlide"
  :slides-per-view="1"
  :space-between="0"
  :modules="[Navigation]"
  navigation
>
  <swiper-slide>  // left out the attributes since they are a mere distraction
    <img/> // left out the attributes since they are a mere distraction
  </swiper-slide>
</swiper>
</template>

我从此代码中获得的错误是：

Answer 1

从我在，您无法使用ref在Swiper vue组件上使用swiper实例，因为它没有公开。

您有其他思考的方式：

• 在＆lt; swiper＆gt;组件的子组件内，使用usewiper（） component。
• 在将＆lt; swiper＆gt;组件构成的父组件上，使用@swiper事件。它在安装后发送swiper对象：

<template>
 <swiper @swiper="getRef" />
</template>

<script setup>
const swiper = ref(null)
function getRef (swiperInstance) {
  swiper.value = swiperInstance
}

function next () {
  swiper.value.slideNext() // should work
}
</script>

Answer 2

您不必使用此方法，而可以像这样导入键盘：

import { Navigation } from 'swiper';

将键盘添加到模块和＆lt; swiper＆gt;的属性：

<swiper :modules="[Navigation, Keyboard]" keyboard />

并将属性添加到＆lt; swiper-slide＆gt;：

<swiper-slide keyboard />