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