引导程序vue转盘组件故障



当我尝试将b-carousel组件与官方文档中的源代码一起使用时,会出现一个奇怪的错误。看起来上一张图像在转换到下一张时变灰:

new Vue({
el: '#app'
})
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/tether@2.0.0/dist/css/tether.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue@2.6.13/dist/vue.min.js"></script>
<script src="https://unpkg.com/tether@2.0.0/dist/js/tether.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<div id="app">
<b-carousel id="carousel-1" :interval="4000" controls indicators background="#ababab" img-width="1024" img-height="480" style="text-shadow: 1px 1px 2px #333;">
<!-- 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>
</div>

您的JSFiddle正在导入资源中的https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css。这将导入引导程序版本5.0.0-beta3

这是因为BootstrapVue只支持Bootstrap4.3.14.5.3(推荐版本为4.5.3(。

因此,如果您改为导入https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css,它应该按预期工作。

https://jsfiddle.net/23ozwgnp/

最新更新