javascript - 如何在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>

标签： javascriptswipevuejs3