vue项目如何设置某节点的最小高度

vue项目如何设置某节点的最小高度

在本项目中，需要给一个dom设置最小高度
最小高度=页面的高度 - 上一个节点到页面顶部的高度

首先 在methods里面设置一个方法

getRightHeight() {
			// 获取页面高度
			let temp = document.getElementsByClassName('xxx')[0].offsetHeight
			// 获取header节点到顶部的距离
			let column = this.$refs.head.$el.offsetTop
			// 设置右边最小高度
			this.$refs.right.$el.style.minHeight = temp - column + 'px'
		}

然后在updated里面调用即可

updated(){
		this.getRightHeight()
	}

遇到的问题

1.获取页面dom节点的时候，通过document.getElementsByClassName获取到的是一个数组形式的数据，需要再次通过document.getElementsByClassName（‘XX’）[0]的形式才能获取到正确的节点

2.在mounted钩子函数里，页面加载完成的时候，不能立马获取到节点的高度，查询到Vue.nextTick(callback) 的用法，后来在updated钩子函数中可以获取到节点的高度等属性