Vue3中监听页面窗体大小改变

<template>
	<div class="container">
		<h1> 测量数据</h1>
		<hr>
		<!-- -->
		<div class="plugins-tips">
			<el-row>
				<el-date-picker v-model="QueryDate" type="date" placeholder="Pick a day" :size="size" />

				<el-button type="primary" @click="QueryGlueMeasurement()">
					查询
				</el-button>
				<el-button type="primary" @click="ToExcel()">
					导出excel
				</el-button> 
			</el-row>
			<div> 
			</div>
			<br>
			<br>
			<br>
			<br>
			<br>
		</div>
	</div>
</template>

<script setup lang="ts" name="laserParameter">
import { ref, reactive, onMounted, getCurrentInstance, watch, onUnmounted } from 'vue'
import { global_const } from '../../globalconst'
import axios from 'axios'
import dateFormat from '../../globalFun'
import XEUtils from 'xe-utils'
import { ElMessage } from 'element-plus' 
const QueryDate = ref('')
const TableHeight = ref('400')

const screenWidth = ref(window.innerWidth)
const screenHeigth = ref(window.innerHeight)
  
const  onResize=()=> {
    screenWidth.value = window.innerWidth;
    screenHeigth.value = window.innerHeight;
  }

onMounted(async () => {
	QueryDate.value = dateFormat(new Date(), 'YYYY-MM-DD') 
	window.addEventListener("resize", onResize);
})
onUnmounted(() => {
    window.removeEventListener("resize", onResize);
  });

watch(screenHeigth, (newValue, oldValue) => {
	TableHeight.value = (document.documentElement.clientHeight-300).toString()
}) 

</script>

<style scoped>
.dialog-footer button:first-child {
	margin-right: 10px;
}

</style>