本文写于 2020年02月13日，距今已超过 1 年，距 2020年03月29日 的最后一次修改也已超过 3 个月，部分内容可能已经过时，您可以按需阅读。如果图片无法显示或者下载链接失效，请给我反馈，谢谢！


0 0 投票数
评分

在用 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 的问题。

组件文档：https://www.iviewui.com/components/carousel

0 0 投票数
评分