在vue3中监听窗口变化resize

最新推荐文章于 2024-02-16 14:13:52 发布

eleanor_wong

最新推荐文章于 2024-02-16 14:13:52 发布

阅读量1.4k

点赞数 2

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/eleanor_wong/article/details/130624508

版权


onMounted(() => {
 	window.addEventListener("resize", handleResize);
});


function handleResize() {
  screenWidth.value = document
    .getElementsByClassName("progress-gray")[0]
    .getBoundingClientRect().width;
  threeScreenWidth.value = document
    .getElementsByClassName("screen-bar")[0]
    .getBoundingClientRect().width;
}

参考代码：

<template>
  <div>
    <p>当前屏幕宽度：{{ screenWidth }}px</p >
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const screenWidth = ref(window.innerWidth)

const handleResize = () => {
  screenWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
p {
  font-size: 24px;
  color: #333;
}
</style>