快捷導(dǎo)航

vue如何監(jiān)聽某個元素的大小變化

更新時間：2023年10月21日 09:41:12 作者：失落の淚

這篇文章主要介紹了vue如何監(jiān)聽某個元素的大小變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue監(jiān)聽某個元素的大小變化

<div class="dialog_wrap"></div>

 console.log(box1.offsetWidth, box1.offsetHeight);
    this.width = box1.offsetWidth; //offsetWidth屬性可以返回對象的padding+border+width屬性值之和
    this.height = box1.offsetHeight;
    const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        if (entry.target.offsetWidth != this.width) {
        // 打印出entry.target 可以看到此處可以進(jìn)行元素的各種變化的監(jiān)聽
        //此處直接寫監(jiān)聽變化后要處理的邏輯即可
 
           //防抖處理（這里做一些監(jiān)聽變化后的邏輯處理）
          if (this.konvatimer !== null) {
            clearTimeout(this.konvatimer);
          }
          this.konvatimer = setTimeout(() => {
            console.log("變化", entry.target.offsetWidth);
            this.width = entry.target.offsetWidth;
            this.height = entry.target.offsetHeight;
 
            this.layer = Konva.Node.create(this.json, "screenTopo").findOne(
              "Layer"
            );
            this.stage = new Konva.Stage({
              container: "screenTopo",
              width: this.width,
              height: this.height,
            });
            this.stage.add(this.layer);
            this.handleInitKonva();
          }, 100);
        }
        
      }
    });
    resizeObserver.observe(document.querySelector(".dialog_wrap"));
     //observe方法 用于監(jiān)聽指定的 Element 或SVGElement

使用element-resize-detector監(jiān)聽元素大小變化

1、應(yīng)用場景

底部固定按鈕欄使用 position: fixed 固定定位，寬度等于右側(cè)內(nèi)容欄的寬度，當(dāng)我們左側(cè)菜單欄收起的時候，其寬度也能夠自適應(yīng)變化。

也就是說底部欄的寬度需要監(jiān)聽其父元素右側(cè)內(nèi)容的寬度從而實現(xiàn)自適應(yīng)變化。

2、解決方法

使用 element-resize-detector

（1）下載

npm i element-resize-detector --save

（2）導(dǎo)入

const elementResizeDetectorMaker = require('element-resize-detector')

（3）使用

// 監(jiān)聽右側(cè)page元素寬度變化，更新底部固定按鈕欄寬度
let erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('id元素'), (ele) => {
    console.log(ele.clientWidth);
})

3、源碼

<template>
    <div class="page" ref="page">
        <div class="page-footer" :style="{'width': footerWidth }">
            <el-button type="primary" @click="handleSubmit">保 存</el-button>
        </div>
    </div>
</template>

 
<script>
    const elementResizeDetectorMaker = require('element-resize-detector')
    export default {
        name: "home",
        data() {
            return {
                footerWidth: "500px" // 底部固定按鈕欄寬度
            }
        },
        mounted() {
            // 監(jiān)聽右側(cè)page元素寬度變化，更新底部固定按鈕欄寬度
            let erd = elementResizeDetectorMaker();
            erd.listenTo(this.$refs.page, (ele) => {
                this.footerWidth = ele.clientWidth - 32 + "px";
            })
        }
    }
</script>

 
<style lang="less" scoped>
    .page-footer {
        height: 52px;
        margin: 0 16px;
        border-top: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0;
        z-index: 99;
        background-color: rgba(255, 255, 255, 0.9);
        .el-button {
            height: 32px;
            width: 96px;
            line-height: 32px;
            padding: 0;
            border-radius: 2px;
        }
    }
</style>