Splide.js 在 Vue.js 的 Bootstrap Vue 标签页下配置不生效如何解决？

• Bootstrap Vue 标签页默认会为未激活标签的内容设置 display: none 样式，Splide.js 初始化时需要读取滑块容器的实际宽高来计算布局、应用配置参数，隐藏状态下无法获取到正确的DOM尺寸，所以自定义配置会出现不生效的问题。

下面提供3种可直接落地的修复方式，按需选择即可：

方式1：标签激活后再初始化Splide #

监听标签页的激活事件，只有当包含Splide轮播的标签被激活时，再执行初始化逻辑，避免元素隐藏阶段初始化导致的尺寸计算错误。

<template>
  <b-tabs @activated="handleTabActivate">
    <b-tab title="轮播标签" event="splide-tab">
      <div ref="splideContainer" class="splide">
        <div class="splide__track">
          <ul class="splide__list">
            <li class="splide__slide">Slide 1</li>
            <li class="splide__slide">Slide 2</li>
            <li class="splide__slide">Slide 3</li>
          </ul>
        </div>
      </div>
    </b-tab>
    <!-- 其他标签 -->
  </b-tabs>
</template>

<script>
import Splide from '@splidejs/splide'

export default {
  data() {
    return {
      splideInstance: null
    }
  },
  methods: {
    handleTabActivate(activeTabEvent) {
      // 仅当轮播所在标签激活且未初始化过Splide时执行初始化
      if (activeTabEvent === 'splide-tab' && !this.splideInstance) {
        this.splideInstance = new Splide(this.$refs.splideContainer, {
          // 此处替换为你的原有Splide配置
          type: 'loop',
          perPage: 3,
          autoplay: true,
          gap: '1rem'
        }).mount()
      }
    }
  },
  // 组件销毁前销毁Splide实例，避免内存泄漏
  beforeUnmount() {
    if (this.splideInstance) {
      this.splideInstance.destroy()
    }
  }
}
</script>

方式2：标签激活后调用refresh方法刷新实例 #

如果业务逻辑需要提前初始化Splide，可以在标签激活时调用Splide实例的refresh()方法，主动触发重新计算布局。

<template>
  <b-tabs @activated="handleTabActivate">
    <b-tab title="轮播标签" event="splide-tab">
      <Splide ref="splideRef" :options="splideOptions">
        <SplideSlide>Slide 1</SplideSlide>
        <SplideSlide>Slide 2</SplideSlide>
        <SplideSlide>Slide 3</SplideSlide>
      </Splide>
    </b-tab>
  </b-tabs>
</template>

<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide'

export default {
  components: { Splide, SplideSlide },
  data() {
    return {
      splideOptions: {
        // 此处替换为你的原有Splide配置
        type: 'loop',
        perPage: 3,
        autoplay: true
      }
    }
  },
  methods: {
    handleTabActivate(activeTabEvent) {
      if (activeTabEvent === 'splide-tab') {
        this.$refs.splideRef.splide.refresh()
      }
    }
  }
}
</script>

方式3：覆盖标签页隐藏样式（无侵入适配） #

如果不想修改JS逻辑，可以通过CSS覆盖Bootstrap Vue标签页的默认隐藏规则，用高度为0+溢出隐藏的方式替代display: none，让隐藏状态的元素依然可以被正常计算尺寸。

/* 全局或组件样式中添加 */
.tab-content > .tab-pane {
  display: block !important;
  height: 0;
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
}
.tab-content > .tab-pane.active {
  height: auto;
  /* 恢复原有激活态的padding、border样式，按需调整 */
  padding: 1rem !important;
  border: 1px solid #dee2e6 !important;
}

内容的提问来源于stack exchange，提问作者mustafabilce