在項目開發(fā)中用到了iview的走馬燈嵌套在模態(tài)框中這種需求，結(jié)果發(fā)現(xiàn)走馬燈圖片不顯示，打開控制臺審查元素發(fā)現(xiàn)走馬燈的內(nèi)部盒子width為0，自己感覺在頁面初始化的時候，因為模態(tài)框初始值為false，所以，走馬燈渲染的時候錯誤的動態(tài)計算了寬度，為0，所以解決方案為讓模態(tài)框和走馬燈通過統(tǒng)一狀態(tài)控制，同時渲染。你可以將Modal 的v-model="imgVisible"這個狀態(tài)值同步到走馬燈的<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>

總結(jié)

以上是生活随笔為你收集整理的iview的走马灯嵌套在模态框中，宽度为0的解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。