vue中如何实现对dom元素大小改变的监听

2023-06-09 03:53| 来源: 网络整理| 查看: 265

1、背景

在窗口大小没改变的时候，有些dom元素的大小发生了变化，导致页面某些元素没有重新渲染，出现不适应的情况。如下图所示：在这里插入图片描述

2、处理方案（1）方案一、vue项目中，我们可以使用element-resize-detector插件来实现，简单粗暴。实现方案如下：

1、安装相关插件，npm install element-resize-detector 2、在main.js中引入依赖，并挂在vue原型链上： import ElementResizeDetectorMaker from "element-resize-detector" Vue.prototype.$erd = ElementResizeDetectorMaker() 3、在界面中使用_this.$erd.listenTo()去做监听，示例代码如下：

mounted() { let _this = this _this.$erd.listenTo(_this.$refs.container, element => { _this.$nextTick(() => { _this.$refs.messageInfoTableRef.resizeTo(element.clientWidth) _this.$refs.transcodingTableRef.resizeTo(element.clientWidth) }) }) }, beforeDestroy() { let _this = this // 离开页面删除检测器和所有侦听器 _this.$erd.uninstall(_this.$refs.container) // 这里用ref是因为vue离开页面后获取不到dom }

2）方案二、最开始我也是用方案一去实现的，但是因为项目中用到了handsonTable,使用方案一，导致表格的复选框无法勾选，排查发现可能是resizeTo（）影响到了，所以才有了方案二，通过ResizeObserver来实现的监听方案。

ResizeObserver接口参考，实现代码如下：

//import ResizeObserver from "resize-observer-polyfill"; data() { return { resizeObserver: null, } }, mounted() { let _this = this _this.resizeObserver = new ResizeObserver(entries => { _this.$nextTick(() => { _this.$refs.messageInfoTableRef.resizeTo(entries[0].target.clientWidth) _this.$refs.transcodingTableRef.resizeTo(entries[0].target.clientWidth) }) }); _this.resizeObserver.observe(document.getElementById("container")); }, beforeDestroy() { let _this = this // 离开页面删除检测器和所有侦听器 _this.resizeObserver.disconnect(); }

最后实现效果如下图：在这里插入图片描述

【本文地址】

公司简介

联系我们