VUE动态渲染导致overflow失效

在vue如果使用v-for动态渲染vue,而没有提前设置好子项的宽高就会导致父盒子无论有没有设置宽高和overflow,只要内容总高度大于父盒子那么内容就会把父盒子撑大。

引发这个问题的原因据我推测是v-for渲染的子项时,如果没有设置子项宽高,那么就会去计算子项宽高,overflow属性要根据内容高度来判断是否要进行内容溢出的处理。如果overflow的判断在子项宽高的计算之前,那么就无法正常处理内容溢出的问题。

我的处理方式:

  1. 获取父盒子的引用
  2. 在vue的任意生命周期函数,异步设置父盒子的宽高和overflow属性,或者直接在mounted中设置
posted @ 2022-06-11 23:11  maplerain  阅读(662)  评论(0编辑  收藏  举报