利用iframe 监听页面宽度变化

📢前情提要：

 首先我的页面样式如上图，左侧菜单部分可以手动展开/收缩；所以会影响到右侧内容部分的宽度，我目前需要将按钮的地方固定在底部，由于采用了 position: absolute;bottom: 0; 导致width不能继承到父元素的宽度，从而展示超出页面。

解决方案：

        通过在内容区域 添加iframe ,通过监听iframe，在监听iframe发生变化后，获取内容区域宽度 赋值给 按钮区域。

上代码：

<div id="page-wrapper">
    <div class="content"></div>
    <iframe ref="iframe" class="iframe"></iframe>
    <div class="btn_wrapper" :style="{'width': setWidth}">
</div>


export default {
    data() {
        setWidth: null,
    },
    mounted() {
        //监听iframe
        this.$refs.iframe.contentWindow.addEventListener('resize', this.getWidth); 
    },
    methods: {
        getWidth() {
            let wrapper = document.getElementById('page-wrapper');
            // 获取外层page-wrapper的宽度 并 赋值给 btn_wrapper
            this.setWidth = window.getComputedStyle(wrapper).width;
        }
    }

}

<style>
    .iframe{
        width: 100%;
        height: 0;
        border: none;
    }

</style>