vue大屏展示高度自适应

vue大屏展示获取当前屏幕盖度

<template>
    <div ref="bigshow">
          <!--大屏内容 -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            clientHeight:'', //当前屏幕高度
        }
    },
    watch:{
        // 如果clientHeight发生改变，就调用这个方法
        clientHeight(){
             this.changeFixed(this.clientHeight)
        }
    },
    beforeMount() {
        // 基准大小
        const baseSize=13;
        let htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;
        const scale=htmlWidth/1920;
        document.documentElement.style.fontSize=baseSize*Math.min(scale,2)+'px';
        window.addEventListener('resize',()=>{
               let htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;
               const scale=htmlWidth/1920;
               document.documentElement.style.fontSize=baseSize*Math.min(scale,2)+'px';
        })
    },
    mounted(){
         this.clientHeight=`${document.documentElement.clientWidth}`;
         let that=this;
         // 窗口货框架被调整大小时触发
         window.addEventListener('resize',()=>{
            that.clientHeight=`${document.documentElement.clientWidth}`;
        })
    },
    methods:{
        // 将窗口高度赋值给节点
        changeFixed(clienHright){
            this.$refs.bigshowContent.style.height=clienHright+'px'
        }
    }
}
</script>