vue获取屏幕高度并赋值给盒子

html:

<div class="contentLeft">
	<div id="echartBox" ref="echartBox"></div>
</div>

js:
data() {
  return {
    clientHeight: "", // echarts高度动态改变
  };
},
watch: {
  // 实时监听年度变化，等于当年年度则不可操作
  year: {
    deep: true,
    immediate: true,
    handler: function (newVal) {
      if (Number(newVal) == 2021) {
        this.noChange = true;
      } else {
        this.noChange = false;
      }
    },
  },
  // 监听屏幕高度变化
  clientHeight: function () {
    this.changeHeight(this.clientHeight);
  }
},
mounted() {
  //获取屏幕可视化的高度；
  this.clientHeight=`${document.documentElement.clientHeight}`;
  / /屏幕大小发生改变触发 window.onresize
  window.onresize = function temp() { 
    this.clientHeight = `${document.documentElement.clientHeight}`;
  };
},

methods: {
	changeFixed(clientHeight) {
	  //动态修改样式(总高度减去头部固定的高度)
      this.$refs.echartBox.style.height = clientHeight - 215 + 'px';
    },
}

只要在路上，总会有光照！