​解决uView折叠面板高度无法自适应问题,根据内容动态改变高度​

发布于 2024-01-15  1830 次阅读


AI 摘要

通过以上代码可以看出,文章讨论了解决uView折叠面板高度无法自适应的问题的两种方法。第一种方法是在使用组件的地方获取该组件属性,然后通过编写方法,在每次点击改变后调用该方法修改高度,使父折叠面板的高度变为自动适应。第二种方法是通过修改样式来覆盖指定的类名,从而改变高度。这两种方法都可以解决uView折叠面板高度无法自适应的问题。

 在使用组件的地方获取该组件属性,本代码中内容动态改变的是foldContent组件(子折叠面板)

方法1

	<u-collapse>
			<u-collapse-item title="风险信息" ref="collapseView">
				<info head="风险点编号" :main="this.essential.number"></info>
				<u-line></u-line>
				<info head="风险点名称" :main="this.essential.name"></info>
				<u-line></u-line>
				<info head="责任部门" :main="this.essential.department"></info>
				<u-line></u-line>
				<info head="责任人" :main="this.essential.manager"></info>
				<foldContent :changeHeight="changeHeight"></foldContent>
			</u-collapse-item>
	</u-collapse>

编写方法,传入子组件,每次点击改变后调用该方法修改高度

changeHeight() {
	//设置父折叠面板为自动高度
	this.$refs.collapseView.$children[0].$children[1].$el.style.height = "auto"
}

子组件

方法2 修改样式覆盖

首先通过开发者工具找到可以修改高度的节点,记住该类的名称

自己编写样式覆盖那个class名称 ​

届ける言葉を今は育ててる
最后更新于 2024-01-15