在用 Vue + iView(现在叫 View Design)的时候遇到一个坑,主要表现是 Carousel 的样式中 width = 0
导致内容不能被正确渲染。
在一个 Modal 中,插入一个 Carousel,Modal 是否显示是由 v-model
控制的,代码非常简单,pictureModal
是由一个 on-click
决定。
<Modal
v-model="pictureModal"
:title="pictureId"
>
<Carousel loop autoplay :autoplay-speed="5000" v-model="carouselId">
<CarouselItem v-for="picture in pictures" :key="picture.id">
<div class="demo-carousel">
<div class="cycle-gallery">
<div class="img-box">
<div class="img-holder">
<img :src="picture.url"/>
</div>
<div class="text-holder">
<h3> {{ picture.title }} </h3>
</div>
</div>
<p> {{ picture.desc }} </p>
<em class="date"> {{ picture.date }} </em>
</div>
</div>
</CarouselItem>
</Carousel>
</Modal>
但是在实际的渲染结果中,模态框正常出现了,但是没有走马灯。显示一片空白。从 F12 看到,<div>
样式 .ivu-carousel-item
宽度为 0,导致其下内容全部不能显示。
解决方案是在 CarouselItem
加上 v-if="pictureModal"
使得模态框与走马灯同时渲染,这样可以避免走马灯渲染时由于模态框是隐藏的,错误地获取了组件宽度为 0 的问题。