欢迎光临
技术人生-雨巷前端

vue获取dom元素高度的方法

获取DOM高度:

<div ref="自定义名称" ></div>

要在钩子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像素单位

生命周期图示

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

lifecycle

 

未经允许不得转载:技术人生 » vue获取dom元素高度的方法

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

我是前端,我不迷茫