开发那些事儿:vue项目弹窗中使用iview Carousel走马灯宽度为0问题

149 阅读1分钟

问题展现:

点击预览商品,弹窗中的走马灯不显示,此时,关闭弹窗再打开或者任意改变窗口大小后图片就显示出来了。

image.png

image.png

审查元素:

发现走马灯其实在正常播放,只是宽度为0

image.png

原因及解决办法:

页面初始化的时候,因为模态框初始值为false,所以,走马灯渲染的时候错误的动态计算了宽度,为0,所以解决方案为让模态框和走马灯通过统一状态控制,同时渲染。

image.png

若以上还是没有解决:

使用$nextTick等弹窗渲染后再渲染走马灯即可

image.png

image.png