Vue 中 用 TS 获取视口高度

1,062 阅读1分钟

这是一个项目的踩坑记录

当我美滋滋的写完 CSS,min-height: 100vh,想着该元素会随着视口的变化而调整大小。但当我在手机上用 Chrome 浏览器打开我的项目页面时,发现因为移动端浏览器的地址栏有时候隐藏,有时候出现,把我的页面底部给顶了出去(因为此时浏览器没有将 100vh 的高度调整为屏幕的可见部分的高度,而是将 100vh 设置为隐藏了地址栏的浏览器高度)。

于是我觉得采取用 JavaScript 来获取视口大小再加载到 div 上的方法。因为我的项目整体用的是 TypeScript,所以采用 TS 的写法。

代码如下

在 App.vue 中,<router-view>上将style绑定变量 autoHeight

<template>
  <div>
    <router-view :style="autoHeight"/>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import {Component} from 'vue-property-decorator';

let windowHeight = window.innerHeight;

@Component
export default class App extends Vue {

  windowHeight = windowHeight;
  autoHeight = {
    height: ''
  };

  getHeight(): void {
    this.autoHeight.height = windowHeight + 'px';
  }

  created(): void {
    window.addEventListener('resize', this.getHeight);
    this.getHeight();
  }

}
</script>