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

在项目开发中用到了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>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/116207800