vue元素监听(element-resize-detector 元素监听)

最新推荐文章于 2024-05-14 09:41:40 发布

落魄实习生

最新推荐文章于 2024-05-14 09:41:40 发布

阅读量1.5k

点赞数

分类专栏： vue 前端文章标签： vue.js javascript 前端

原文链接：https://www.jianshu.com/p/4a8ad5a6245c

版权

Vue element-resize-detector 监听响应式布局 DOM尺寸变化

关键词由优快云通过智能技术生成

前端同时被 2 个专栏收录

46 篇文章

订阅专栏

vue

39 篇文章

订阅专栏

本文介绍如何在Vue应用中利用element-resize-detector库实现元素大小变化监听，通过示例展示了如何安装、引入并使用该库来实时调整响应式布局。

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

下载引用 element-resize-detector

地址：https://github.com/wnr/element-resize-detector

element-resize-detector 元素监听
https://github.com/wnr/element-resize-detector

npm install element-resize-detector

import elementResizeDetectorMaker from "element-resize-detector"
// 或者
let elementResizeDetectorMaker = require("element-resize-detector");

使用示例

<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 => {
            this.$refs.tableBox.style.height = window.innerHeight - element.offsetHeight;
        });
    })
}

或者

mounted(){
    this.erd = elementResizeDetectorMaker();
    this.$nextTick(() => {
        this.erd.listenTo(document.getElementById("adaptionBox"), element => {
            document.getElementById("tableBox").style.height = window.innerHeight - element.offsetHeight;
        });
    })
}