coreui-vue框架CCarousel轮播组件页面挂载后无法自动轮播是什么原因

• 你使用v-if控制CCarousel的渲染时机，在mounted钩子中修改isLoaded触发组件渲染时，CCarousel内部的自动播放初始化逻辑依赖DOM尺寸计算，此时DOM还未完成完整的尺寸计算，导致自动播放定时器未正常启动。而调整屏幕尺寸会触发窗口resize事件，CCarousel内部监听了该事件用于重置轮播状态，此时定时器被正常初始化，轮播就可以正常切换。
• 部分版本的@coreui/vue轮播组件需要显式声明autoplay属性才会开启自动播放，仅设置interval不会默认触发自动播放逻辑。

1. 给CCarousel显式添加autoplay属性，同时使用ref获取组件实例，在组件渲染完成后手动调用启动方法，修正后的代码如下：

<template>
  <CCarousel 
    ref="carousel"
    v-if="isLoaded" 
    :interval="4000" 
    transition="crossfade"
    autoplay
  >
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/vue.jpg"
        alt="slide 1"
      />
    </CCarouselItem>
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/react.jpg"
        alt="slide 2"
      />
    </CCarouselItem>
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/angular.jpg"
        alt="slide 3"
      />
    </CCarouselItem>
  </CCarousel>
</template>

<script>
import { CCarousel, CCarouselItem } from "@coreui/vue";
export default {
  components: {
    CCarousel,
    CCarouselItem,
  },
  data() {
    return {
      isLoaded: false,
    };
  },
  mounted() {
    this.isLoaded = true
    // 等待DOM渲染完成后手动启动轮播
    this.$nextTick(() => {
      this.$refs.carousel?.start()
    })
  },
};
</script>

2. 如果不需要严格控制组件的销毁重建，也可以将v-if替换为v-show，避免组件重复初始化的问题，同时显式添加autoplay属性即可。

内容的提问来源于stack exchange，提问作者Milos N.