在項目開發中用到了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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。