1

我在 NuxtJS 项目中工作，我们正在实施GlideJS。我们现在遇到的问题是，有时其中一张幻灯片只显示幻灯片的 HTML 部分，而不是包含的组件。当我们前进或后退直到特定幻灯片出现时，它将成功加载组件。显然这是一个缺陷，我们应该修复它。

有没有人遇到过同样的问题，如果有，您是否设法找到解决方案？

我们当前的代码：

<template>
  <div>
    <vue-glide
      v-if="entries.length > 0"
      ref="slider"
      type="carousel"
      class="max-w-full mb-6 md:mb-12"
      :per-view="perView"
      :breakpoints="breakpoints"
    >
      <vue-glide-slide v-for="(entry, index) in entries" :key="index">
        <div class="rounded-xl bg-app-green-200 overflow-hidden">
          <MoleculePicture image="entry.images">

          <div class="border-b-2 border-app-yellow block"></div>
          <div class="py-5 px-6">
            Some HTML here (working fine)
          </div>
        </div>
      </vue-glide-slide>
      <template v-if="entries" slot="control">
        <div class="float-left cursor-pointer border-box w-2/5 mt-4" data-glide-dir="<">
          <AtomIconArrowLeft class="w-4 float-left md:float-right" />
        </div>
        <div class="inline-block text-center border-box w-1/5 mt-4 font-bold">{{ currentSlide + 1 }}/{{ entries.length }}</div>
        <div class="float-right cursor-pointer border-box w-2/5 mt-4" data-glide-dir=">">
          <AtomIconArrowRight class="w-4 float-right md:float-left" />
        </div>
      </template>
    </vue-glide>
  </div>
</template>

如您所见，我们在幻灯片中使用了一个名为MoleculePicture的组件（在此示例中，我们尝试了多个组件，但它们都失败了） 。

除“克隆”幻灯片外，所有幻灯片似乎都显示正常，我无法解决它。

4

0 回答 0