问题描述

在点击侧边栏的子元素时，如果侧边栏的子元素也有子元素,那么父元素的高度计算就会出问题,导致子元素不显示

解决方案:

先保存所有的子元素数据,然后计算所有子元素的 scrollHeight 将其设置父元素的高度,一定是scrollHeight而不是height,因为scrollHeight包含了未显示的元素,而height为可见高度,不包含未显示的元素,未显示元素是溢出容器的元素

1
2
3
4
5
6
const contentRef = useTemplateRef('contentRef')
defineExpose({ element: contentRef })

const height = childrens.value.reduce((height, item) => {
  return height + item.element.scrollHeight
}, 40 /* 默认高度 */)