iview的走马灯嵌套在模态框中，宽度为0的解决方案

原创于 2021-04-27 19:03:23 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

iview 专栏收录该内容

16 篇文章

订阅专栏

在Vue项目开发中遇到一个问题，当走马灯组件（Carousel）嵌套在Modal模态框内时，由于Modal初始为隐藏状态，导致走马灯图片显示为宽度为0。解决办法是通过同步Modal的显示状态（v-model=imgVisible）到走马灯的渲染条件（v-if=imgVisible），确保两者同时渲染。或者在图片集合存在时再渲染走马灯，避免初始化时的计算错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目开发中用到了iview的走马灯嵌套在模态框中这种需求，结果发现走马灯图片不显示，打开控制台审查元素发现走马灯的内部盒子width为0，自己感觉在页面初始化的时候，因为模态框初始值为false，所以，走马灯渲染的时候错误的动态计算了宽度，为0，所以解决方案为让模态框和走马灯通过统一状态控制，同时渲染。你可以将Modal 的v-model="imgVisible"这个状态值同步到走马灯的<Carousel v-if="imgVisible"></Carouse>,或者如下，图片集合有值了在渲染，两者都可以、

	<Modal title="查看凭证" v-model="imgVisible" :transfer="false">
        <div class="img-box">
          <Carousel v-if="imgList && imgList.length>0" class="Carousel" arrow	="always">
            <CarouselItem v-for="url in imgList" :key="url" class="CarouselItem">
              <img :src="url" style="width: 100%" />
            </CarouselItem>
          </Carousel>
          <p v-else>暂无凭证</p>
        </div>
      </Modal>