在使用Vue框架搭建网站时，其中有一网页用于展示坐标点，使用Vue Baidu Map进行数据的绑定，地图初始时，宽度必须要设定，否则无法完成地图渲染。在<baidu-map>标签中设置style属性值如下：
<div id="map"> <baidu-map :style="{width:map.width,height:map.height}" /> </div>
在地图初始函数handler中设置地图的初始值，
this.map.width = document.getElementById("map").clientWidth +'px'; this.map.height = document.getElementById("map").clientHeight +'px';
当点击折叠菜单按钮时，通过获取元素map的宽度来刷新地图的宽度。但是尝试几个方法来设置都失败，最终将子元素宽度设置为100%后，地图宽度得以屏幕自适应，仰天一叹 😦 ：吃了没有详细看CSS的亏。
首先看一下我都尝试了哪些操作。
一、计算方法
1.1 监听折叠按钮的变化，获取map的值
collapsed: function (val){ console.log('current map width', document.getElementById("map").clientWidth); this.bigWidth = 1051 +'px'; if(val){ this.smallWidth = document.getElementById("map").clientWidth +'px'; }else{ this.bigWidth = document.getElementById("map").clientWidth +'px'; } if(val){ this.map.width = this.bigWidth; }else{ this.map.width = this.smallWidth; } },
结论：当监听到折叠按钮变化时，直接获取的是未进行更新的DOM元素的值，因此我还设置了宽度值，因为第一次获取的时候是undefined。
1.2 监听map元素的resize变化，更新地图的宽度
import elementResizeDetectorMaker from "element-resize-detector";//导入该库 let that = this; let elements = []; elements.push(document.getElementById("map")); elementResizeDetectorMaker().listenTo(elements,() => { that.map.width = document.getElementById("map").clientWidth; console.log(that.map.width); });
结论：虽然能够取到折叠后的宽度，但是设置不生效，原因未知（估摸着是浏览器渲染问题，待深入研究其机理再分析，本文先提供几个试错的样本，避免再走弯路）。
1.3 延时更新map元素宽度
let that = this; setTimeout(()=>{ that.map.width = document.getElementById("map").clientWidth; console.log('setTimeout',that.map.width); },1200);
结论：同1.2。
二、极简方法
通过style属性，将子元素宽度设置为100%。
:style="{width:'100%',height:map.height}
