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

最新推荐文章于 2024-03-27 15:58:29 发布

郝程序猿

最新推荐文章于 2024-03-27 15:58:29 发布

阅读量709

点赞数 1

文章标签： vue.js javascript 前端

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

版权

应用场景：我这边主要是使用他来监听一个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; //这里面是监听变化后操作的
        });
    })
}