Vue 3组件中监听浏览器窗口的大小变化

const windowWidth = ref(window.innerWidth);


onMounted(() => {
	// 在组件挂载后检查屏幕大小
	// 添加事件监听，以便在屏幕大小变化时更新条件
	window.addEventListener('resize', checkScreenSize);
	// 立即检查屏幕大小
	console.log("在组件挂载后检查屏幕大小")
})

onUnmounted(() => {
	// 清理事件监听器
	window.removeEventListener('resize', checkScreenSize);
	console.log("清理事件监听器")

})

const checkScreenSize = () => {
  debugger
  windowWidth.value = window.innerWidth

  // 使用媒体查询检查屏幕宽度
	// 当屏幕宽度大于或等于1000像素时，storeDisplay.showMenu 将为 true
	if (windowWidth.value >= 1000) {
		storeDisplay.showMenu = true
	} else {
		storeDisplay.showMenu = false
	}
	console.log("使用媒体查询检查屏幕宽度")

}