import { ref , onMounted } from "vue";
 
/*
*
* Vue3計算剩余高度
*
*/
export default function () {
 
    //在Init的時候先行調(diào)用，然后在監(jiān)聽窗口的變化，保證是最新的寬高度
    onMounted(()=>{
        setWindowResize();
        window.addEventListener('resize',setWindowResize)
    });
 
    //測算基點
    let basePoint = ref();
 
    //元素測試盒子
    let elementWidth = ref(0);
 
    //窗口的高度
    let windowHeight = ref(0);
 
 
    const setWindowResize = function () {
        elementWidth.value = basePoint.value.getBoundingClientRect().top;
        windowHeight.value = window.innerHeight
    }
 
    return { basePoint , elementWidth , windowHeight };
}

<script setup lang="ts">
  import useCommon from '@/common/useCommon';
 
  const  { basePoint , windowHeight , elementWidth } = useCommon();
 
 
</script>
 
<template>
   <div id="app">
     <div  style="height: 30px;background-color: rosybrown">{{ elementWidth }}</div>
     <div ref="basePoint"></div>
     <div :style="`height:calc( ${ windowHeight } - ${ elementWidth }px);background-color: tan`"></div>
   </div>
</template>
 
<style>
  html, body, #app {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: rebeccapurple;
  }
</style>