Vue中获取高度的方法

一.Vue 中获取滚动条高度的方法

<script type="text/Babel">

	mounted() {//可以在这里面直接进行滚动条的获取
		window.addEventListener('scroll', this.getTopHeight , true)
	}

            
	methods: {
		getTopHeight () {
		//方法一
		//let topHeight = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset)
 		//console.log(topHeight)
    	    
 		//方法二
		this.nextTick(()=>{此处表示渲染完成界面后执行
		let topHeight= document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset)
		console.log(topHeight)
 		})
	  }
   }
   
</script>

二.Vue 中获取dom元素高度的方法

<template>
	<div>
		<div  ref="element"></div>
	</div>
</template>

方法如下：

<script type="text/Babel">

	//获取高度值
	let height = this.$refs.element.offsetHeight; 

	//获取元素样式值
	let heightCss = window.getComputedStyle(this.$refs.element).height; 

	//获取元素内联样式值
	let heightStyle = this.$refs.element.style.height; 

</script>

三.Vue 设置滚动条滚动到顶部

<script type="text/Babel">

    window.scroll(0, 0);
    
</script>

window.scroll(x-coord, y-coord)

• x-coord 值表示你想要置于左上角的像素点的横坐标。
• y-coord 值表示你想要置于左上角的像素点的纵坐标。

补充：通过ref获取dom元素宽高的几个方法

1.offsetTop :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight :
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

5.offsetParent :
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．

6.scrollLeft :
对象的最左边到对象在当前窗口显示的范围内的左边的距离．
即是在出现了横向滚动条的情况下，滚动条拉动的距离．

7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．