Vue3项目使用bootstrap-vue3的Carousel轮播组件无法运行求助

修复步骤 #

• 依赖样式引入修正
  必须在项目入口文件（main.js/main.ts）按如下顺序引入样式，顺序错误会导致组件样式、交互异常：

// 先引入Bootstrap 5官方样式
import 'bootstrap/dist/css/bootstrap.css'
// 再引入BootstrapVue3样式
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

• 组件完整注册
  轮播功能依赖BCarousel、BCarouselSlide两个组件，注册时不能遗漏，局部注册示例如下：

import { BCarousel, BCarouselSlide } from 'bootstrap-vue-3'

export default {
  components: {
    BCarousel,
    BCarouselSlide
  },
  // 其余原有逻辑
}

• API适配调整
  你所使用的代码来自Vue2版本BootstrapVue的官方文档，和Vue3版本的BootstrapVue3 API存在差异，需要做两处修改：
  1. 事件名调整：将原@sliding-start改为@slide-start，原@sliding-end改为@slide-end
  2. 数值属性绑定调整：将img-width="1024"、img-height="480"改为动态绑定:img-width="1024"、:img-height="480"，确保传入组件的是数值类型参数

修正后完整代码 #

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      :img-width="1024"
      :img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @slide-start="onSlideStart"
      @slide-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
        caption="First slide"
        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
        img-src="https://picsum.photos/1024/480/?image=52"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <template #img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://picsum.photos/1024/480/?image=55"
            alt="image slot"
          >
        </template>
      </b-carousel-slide>

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>
    </b-carousel>

    <p class="mt-4">
      Slide #: {{ slide }}<br>
      Sliding: {{ sliding }}
    </p>
  </div>
</template>

<script>
import { BCarousel, BCarouselSlide } from 'bootstrap-vue-3'
export default {
  components: {
    BCarousel,
    BCarouselSlide
  },
  data() {
    return {
      slide: 0,
      sliding: null
    }
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true
    },
    onSlideEnd(slide) {
      this.sliding = false
    }
  }
}
</script>

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