VueUse useWindowSize 获取窗口大小

VueUse useWindowSize 获取窗口大小,注意不是docment文档的大小,返回响应式对象。

代码示例

import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()

在线例子

例子

组件用例

也可以通过UseWindowSize组件获取元素大小

<template>
 <UseWindowSize v-slot="{ width, height }">
  Width: {{ width }}
  Height: {{ height }}
</UseWindowSize>
</template>
<script setup>  
 //导入组件
 import {UseWindowSize} from '@vueuse/components'
</script>