本文写于 2020年02月13日，距今已超过 1 年，距 2022年10月18日 的最后一次修改也已超过 3 个月，部分内容可能已经过时，您可以按需阅读。如果图片无法显示或者下载链接失效，请给我反馈，谢谢！
在用 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 的问题。