产品卡悬停上的 Init Vue Awesome swiper答案

【问题标题】：Init Vue Awesome swiper on product card hover产品卡悬停上的 Init Vue Awesome swiper
【发布时间】：2021-04-09 06:28:43
【问题描述】：

理想情况下，我需要 vue awesome swiper 来初始化产品卡悬停，所以在用户悬停之前，目录只为每个产品加载一个 img 而不是多个。

HTML

    <div
      @mouseover="handleMouseOver"
      @mouseleave="handleMouseLeave"
    />
      <div
        v-if="media.length > 1"
        ref="swiper"
        v-swiper:mySwiper="swiperOption"
      >
        <div class="swiper-wrapper">
          <div
            v-for="image in images"
            :key="image.id"
            class="swiper-slide image__wrapper"
          >
            <img
              :src="image.attributes.src"
              :width="imgWidth"
              :height="imgHeight"
              :alt="imgAlt"
            >
          </div>
        </div>
      </div>
    </div>

组件

  data: () => ({
    swiperOption: {
      loop: true,
      slidesPerView: 1,
      centeredSlides: true,
      spaceBetween: 30,
    },
  }),

  methods: {
    slideStart() {
      if (this.$refs.swiper) {
        this.mySwiper.activeIndex = 2;
        this.mySwiper.autoplay.start();
      }
    },
    slideStop() {
      if (this.$refs.swiper) {
        this.mySwiper.autoplay.stop();
        this.mySwiper.activeIndex = 1;
      }
    },
    handleMouseOver() {
      this.isHovered = true;
      this.slideStart();
    },
    handleMouseLeave() {
      this.isHovered = false;
      this.slideStop();
    },
 },

我的尝试和遇到的问题：起初，我在 v-if 中添加了 isHovered 条件，并在 v-else 中使用了元素，但是在悬停后，swiper 拒绝自动播放（但对 activeIndex 更改做出反应）

之后，我尝试将 init:false 添加到 swiperOption 和 this.$mySwiper.init() 悬停时，但每当我试图离开页面时它就会崩溃：

希望有任何想法。

【问题讨论】：

标签： vue.js nuxt.js swiper

【解决方案1】：

通过创建父 div 并在此处移动带有悬停条件的“v-if”逻辑来解决。

【讨论】：