Vue-使用element-resize-detector监听元素大小变化

1、应用场景

        底部固定按钮栏使用 position: fixed 固定定位，宽度等于右侧内容栏的宽度，当我们左侧菜单栏收起的时候，其宽度也能够自适应变化。也就是说底部栏的宽度需要监听其父元素右侧内容的宽度从而实现自适应变化。

2、 解决方法：使用 element-resize-detector

（1）下载

npm i element-resize-detector --save

（2）导入

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

（3）使用

// 监听右侧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() {
            // 监听右侧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>