Vue中使用window.matchMedia来判断分辨率

如果你想使用 window.matchMedia 来实现根据屏幕分辨率显示不同内容的功能，可以按照以下方式进行：

<template>
  <div>
    <h1>当前屏幕分辨率: {{ screenResolution }}</h1>
    <div v-if="isLargeScreen">大屏幕内容</div>
    <div v-else>小屏幕内容</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

const screenResolution = ref('')
const isLargeScreen = ref(false)

const updateScreenResolution = () => {
  const mediaQuery = window.matchMedia('(min-width: 1200px)')
  isLargeScreen.value = mediaQuery.matches
  screenResolution.value = isLargeScreen.value ? '大屏幕' : '小屏幕'
}

onMounted(() => {
  updateScreenResolution()
  window.addEventListener('resize', updateScreenResolution)
})
</script>

在上述示例中，我们使用 window.matchMedia 创建了一个媒体查询对象 mediaQuery，并通过 mediaQuery.matches 来获取当前屏幕是否匹配查询条件。我们将这个布尔值赋给 isLargeScreen 响应式变量，然后根据其值来显示不同的内容。

在 updateScreenResolution 方法中，我们在组件挂载后和窗口大小改变时调用 updateScreenResolution 来更新屏幕分辨率和内容显示。

这样修改后，将根据屏幕分辨率显示不同内容的功能将与之前的示例一起工作。