Vue 项目实现元素尺寸的变化监听

「已注销」

已于 2023-12-13 13:20:07 修改

阅读量519

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-12-13 13:02:54 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37276252/article/details/134969387

本文介绍了如何在 Vue 项目中使用 element-resize-detector 库来监听元素尺寸变化，通过 entries 对象获取元素宽度并进行业务操作，同时提醒在不使用时释放监听器。

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

安装 element-resize-detector 依赖

npm install element-resize-detector -S

一睹为快

import ElementResizeDetector from 'element-resize-detector';
const isCollapsed = ref(false)
// 引用 layout 元素对象
const layout = ref(null)
const elementResizeDetector = ref(null)

// 开启 layout 元素尺寸大小变化监听器
const startLayoutElmSizeListener = function() {
	elementResizeDetector.value = new ElementResizeDetector({
		strategy: 'scroll'
	})
	elementResizeDetector.value.listenTo(layout.value, (entries, observer) => {
		const width = entries.offsetWidth
		// 尺寸小于lg时，收起侧边栏，节省位置
		if (width < 992) {
			isCollapsed.value = true
		} else {
			isCollapsed.value = false
		}
	})
}
// 结束 layout 元素尺寸大小变化监听器
const endLayoutElmSizeListener = function() {
	elementResizeDetector.value.uninstall(layout.value)
}