动态的监听浏览器的高度赋值给div 随意拉动高度动态赋值。

我是直接在App.vue 写的。

<template>
  <div id="app" :style="'height:'+clienHeight+'px;'">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "APP",
  data() {
    return {
      clienHeight:
        document.documentElement.clientHeight || document.body.clientHeight,
      timer: null,
    };
  },
  created() {},
  watch: {
    clienHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.clienHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          that.timer = false;
        }, 400);
      }
    },
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        (window.clienHeight =
          document.documentElement.clientHeight || document.body.clientHeight),
          (that.clienHeight = window.clienHeight);
      })();
    };
  },
  methods: {},
};
</script>

<style>
/* CSS */
#app {
  width: 100%;
}
</style>