vue中使用element-resize-detector 元素监听

最新推荐文章于 2024-03-12 15:47:31 发布

郝程序猿

最新推荐文章于 2024-03-12 15:47:31 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53667605/article/details/130880820

文章介绍了如何在Vue.js应用中使用element-resize-detector库来监听div元素的高度变化，以便在尺寸改变时重新加载水印组件或调整其他元素的样式。通过安装库，导入并应用到Vue实例的生命周期方法中，可以实现实时响应式布局调整。

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

应用场景：我这边主要是使用他来监听一个DIV 盒子高度的变换从而实现水印组件的重新加载

1、安装

npm install element-resize-detector --save

2、使用（全局或者局部）

import resizeDetector from 'element-resize-detector'

3、应用

<div ref="adaptionBox" id="adaptionBox" style="width:200px;height:200px;background:green"></div>
<div ref="tableBox" id="tableBox" style="width:200px;height:200px;background:red"></div>

data() {
    return {
        erd: null
    }
},
mounted(){
    this.erd = elementResizeDetectorMaker();
    this.$nextTick(() => {
        this.erd.listenTo(this.$refs.adaptionBox, element => {
            //这里面是监听变化后操作的
        });
    })
}

或者

mounted(){
    this.erd = elementResizeDetectorMaker();
    this.$nextTick(() => {
        this.erd.listenTo(document.getElementById("adaptionBox"), element => {
            document.getElementById("tableBox").style.height = window.innerHeight - element.offsetHeight; //这里面是监听变化后操作的
        });
    })
}