Leaflet - 解决地图容器尺寸变化，地图有空白的问题

 size变化，地图重新加载

setTimeout(()=>{
    map.invalidateSize(true)
}， 400)

---

在一个vue + leaflet的项目中，左侧目录可以进行伸缩，右侧地图自适应大小；

1. 布局

点红色按钮，弹入、弹出左侧目录列表。

整体是flex，设置左侧为一定的宽度，右侧设置flex-grow：1自适应剩余空间

伸缩通过，修改左侧宽度：width：0px 实现；

2. 问题

当地图的容器宽度变化后，地图的图层并未及时加载，拖动地图后仍然有一部分是空白的；

3. 解决

在红色按钮点击时（即：宽度变化后），调用：

setTimeout(()=>{
    map.invalidateSize(true)
}， 400)

我这里使用一个状态变量，去控制左侧列表的class；所以在Vue的watch当中，判断该状态变化时就去调用上面的代码；

使用this.$nextTick() 可能会不起作用