openlayers由于地图div宽度改变出现空白问题解决

项目中遇到的一个需求：将界面分为左右两栏，左边是地图界面，右边是功能界面，要求中间能够用鼠标移动改变两个div的宽度，这个功能的实现参考了https://segmentfault.com/a/1190000023324536。

出现的问题，左边嵌入openlayers的底图，在改变宽度后，右侧会出现空白，看着非常难受

找了很久的解决方案终于找到了一个完美解决此问题的：https://blog.csdn.net/weixin_43155640/article/details/107836129

observer: function () {
    // 我加的
    var self = this;
    // 选择需要观察变动的节点
    const targetNode = document.getElementById('rightPanel')
    // 观察器的配置（需要观察什么变动）
    const config = { attributes: true, childList: true, subtree: true }
    // 当观察到变动时执行的回调函数
    const callback = function (mutationsList, observer) {
        // Use traditional 'for loops' for IE 11
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                console.log('A child node has been added or removed.')
            } else if (mutation.type === 'attributes') {
                self.map.updateSize()
                console.log('The ' + mutation.attributeName + ' attribute was modified.')
            }
        }
    }
    // 创建一个观察器实例并传入回调函数
    const observer = new MutationObserver(callback)
    // 以上述配置开始观察目标节点
    observer.observe(targetNode, config)
}

在mounted中调用