教程

iView Carousel 样式宽度为 0 的踩坑

jxtxzzw · 2月13日 · 2020年 · 16次已读

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

关注长老,阅读更多优秀文章哦~~

凝神长老的二维码们
0 条回应