vue-cli中动态设置页面可视区域高度

原文章路径：原文章

这里用到了jquery，需要引入jquery依赖，当然也可以直接进行dom操作

HTML代码：

<template>
  <div class="hello" ref="homePage">//设置最外层div的ref属性
  
   </div>
</template>

JS：

 <script>
  export default {
    data(){
      return {
        clientHeight:'',
      }
    },
    mounted(){
      this.initHeight();
    },
    watch: {
      // 如果 `clientHeight` 发生改变，这个函数就会运行
      clientHeight: function () {
        this.changeFixed(this.clientHeight)
      }
    },
    methods:{
      changeFixed(clientHeight){                        //动态修改样式
        //console.log(clientHeight);
        this.$refs.homePage.style.height = clientHeight+'px';

      },
       initHeight(){  //获取高度
            //获取浏览器可视区域高度
            this.clientHeight = $(document).height();
            // console.log($(document).height());//浏览器可视区域对象宽度
            window.onresize = () => {  //当窗口或框架发生改变时触发
            //console.log("onresize进来了");
              this.clientHeight = $(document).height();
            };
        }
    }
  }
</script>