[Bug Report]Carousel 走马灯组件在Layout（左右结构）中宽度计算错误，导致内容闪动

lnend1992 commented 5 years ago

Environment

vue

Reproduction link

https://jsfiddle.net/cnBeehive/4bg2aj0d/

Steps to reproduce

Carousel 走马灯组件嵌套在Layout组中，布局中需要有侧边栏

What is expected?

初始化后宽度计算正确，不出现页面闪动

What is actually happening?

初始化后宽度计算大于实际宽度，后调整为实际宽度，导致页面内容闪动

由于Layout中控制布局水平排列方式的样式是 ivu-layout-has-sider，该样式是否存在的逻辑是在Layout mounted 生命周期时判断当前Layout children中是否有Sider组件，Carousel 走马灯组件在计算宽度的时候由于处于Layout内部，这时并不会触发Layout的 mounted 生命周期回调，也就是说会在Layout 布局方式为垂直排列（默认）时计算宽度，Carousel mounted 后才会触发外层Layout的 mounted 函数将当前布局方式改为水平排列，导致Carousel组件宽度计算错误，宽度为当前容器宽度 Sider容器宽度，大于实际宽度，导致其内容位置排列错误

DebugIsFalse commented 4 years ago

最好自己手动触发一下，重新滚动事件，再次计算宽度

zhenyu-dev commented 4 years ago

重新滚动事件

什么意思，能说清楚吗

iview / iview