vue如何获取div的宽度_vue获取dom元素高度的方法

获取DOM高度：

要在钩子mounted里面dom结构生成后去获取dom的高度，宽度，修改样式等操作(参照生命周期钩子mounted语法：https://cn.vuejs.org/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像素单位

生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。