Vue3.0中如何通过双击打开或关闭自动播放？

Question

我想在Vue3.0中通过双击来打开或关闭自动播放，我尝试了很多次，但一直没有成功。

我想使用'swiper.autoplay.stop()'方法来停止自动播放，但是出现错误“Uncaught TypeError: Cannot read property 'stop' of undefined'”。

请告诉我我该怎么办。谢谢。

这是我的 vue 代码。

<template>
  <swiper
    :pagination="{ clickable: true }"
    :grabCursor="grabCursor"
    :effect="effect"
    :loop="loop"
    :centeredSlides=true
    :autoplay="autoplay"
    @slideChange="onSlideChange"
    @doubleClick="ondblclick"
  >
    <swiper-slide v-for="item in arr" :key="item"><img :src="item" style="width: 100%;"></swiper-slide>
  </swiper>
</template>
<script>
import 'swiper/components/effect-cube/effect-cube.scss'
import SwiperCore, { EffectCube, Pagination, Autoplay } from "swiper"
import { Swiper, SwiperSlide } from 'swiper/vue'

SwiperCore.use([EffectCube, Pagination, Autoplay])

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      effect: 'cube',
      grabCursor: true,
      loop: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      autoplay: {
        delay: 4000,
        disableOnInteraction: false
      },
      arr: ['https://scpic.chinaz.net/files/pic/pic9/202101/apic30631.jpg']
    }
  },
  methods: {
    onSlideChange () {
    },
    ondblclick () {
    }
  }
}
</script>

<style scoped>
.swiper-container {
  width: 330px;
  height: 495px;
  margin-top: 20px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}
</style>

Answer 1

根据文档，您应该在

setup

回调中传递它：

export default {
    setup() {
        const ondblclick = (swiper) => {
            swiper.paused ? swiper.resume() : swiper.pause();
        };
    
        return {
            ondblclick,
        };
    },
}