當前位置:
首頁 >
iview的走马灯嵌套在模态框中,宽度为0的解决方案
發(fā)布時間:2023/12/31
46
豆豆
生活随笔
收集整理的這篇文章主要介紹了
iview的走马灯嵌套在模态框中,宽度为0的解决方案
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在項目開發(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 斗罗大陆武魂觉醒圣魂结晶怎么用 《斗罗大
- 下一篇: 移动端H5页面返回并且刷新页面(BFca