vue3 监听容器大小变化

最新推荐文章于 2024-12-21 12:05:30 发布

易de

最新推荐文章于 2024-12-21 12:05:30 发布

阅读量1k

点赞数 8

文章标签： vue.js javascript 前端

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/135978908

版权

本文介绍了如何在Vue项目中使用ResizeObserver监测`element`组件的宽高变化，以实现当宽度小于1140px时切换isSmall状态。文章详细阐述了组件挂载、卸载时的观察者管理和生命周期管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div ref="element">
  	...
  </div>
</template>

<script setup>
	import {ref, onMounted, onBeforeUnmount} from "vue";
	
	const isSmall = ref(false)
	const element = ref(null);
	
	const resizeObserver = new ResizeObserver(entries => {
	  // 处理大小变化的回调函数
	  if(element.value && element.value.offsetWidth < 1140) {
	    isSmall.value = true
	  } else {
	    isSmall.value = false
	  }
	});
	
	onMounted(() => {
	  getList()
	  resizeObserver.observe(element.value);
	})
	
	// 移除监听 
	onBeforeUnmount(() => {
	  resizeObserver.unobserve(element.value);
	})
</script>