获取DOM高度：
要在钩子mounted里面dom结构生成后去获取dom的高度，宽度，修改样式等操作(参照生命周期钩子mounted语法：/v2/api/#mounted)
mounted() {
let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
let topH = this.$refs.topInfo.offsetHeight;
console.log()
let tabH = this.$refs.tab.offsetHeight;
console.log()
let subH = this.$refs.subBtn.offsetHeight;
console.log()
let scrollHight = this.$refs.scroller.offsetHeight
this.height = (h - topH - tabH - subH) + "px"
//localStorage.setItem("access_token", '52ecda6ecb4a11e7bd2a00163e0891fd') //测试token
this.queryData(0)
let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //浏览器宽度
}
获取dom元素高度通过在标签里面定义ref属性，用this.$refs.自定义名称.offsetHight;去获取。
mounted() {
const _self = this
_self.$nextTick(function() {
_self.winHeight = document.documentElement.clientHeight
_self.headerBoxHeight = _self.$refs.headerBox.offsetHeight
_self.renderTableMaxHeight()
window.onresize = () => {
return (() => {
_self.winHeight = document.documentElement.clientHeight
_self.headerBoxHeight = _self.$refs.headerBox.offsetHeight
_self.renderTableMaxHeight()
})()
}
})
},
methods: {
renderTableMaxHeight() {
this.maxHeight = this.winHeight - this.headerBoxHeight - 214
this.maxHeight = this.maxHeight < 200 ? 200 : this.maxHeight
}
}
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
mounted: function (){
this.$nextTick(function (){
// Code that will run only after the
// entire view has been rendered
})
}
该钩子在服务器端渲染期间不被调用。
其他获取DOM指定高度的方式：
//获取元素样式值,为元素ref="ele"(在样式里面写死了的高度)
var heightCss = window.getComputedStyle(this.$refs.ele).height; // 获取的值带px像素单位
//获取元素内联样式值
var heightStyle = this.$refs.ele.style.height; // 获取的值带px像素单位
生命周期图示
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
