如何使用Vue2Leaflet的l-popup组件调整Leaflet弹窗宽度

你传入的配置不生效的核心原因是：Leaflet 原生 Popup 实例没有width这个配置项，你需要使用官方提供的minWidth和maxWidth参数实现宽度控制。

方案1：通过options属性正确配置 #

如果要固定弹窗宽度，将minWidth和maxWidth设为相同值即可；如果需要自适应范围，分别设置上下限即可：

<l-popup :options="{ minWidth: 600, maxWidth: 600 }" id="popup">
  <!-- 弹窗内容 -->
</l-popup>

方案2：自定义CSS样式覆盖（兼容性最高） #

如果配置项无法满足需求，或者存在全局样式冲突，可以给弹窗绑定自定义类名后覆盖原生样式，避免污染全局Leaflet弹窗样式：

1. 给l-popup组件绑定自定义类名

<l-popup :options="{ className: 'custom-map-popup' }" id="popup">
  <!-- 弹窗内容 -->
</l-popup>

2. 新增样式控制尺寸（如果是Vue单文件组件带scoped属性的style块，需要使用深度选择器）

/* 控制弹窗整体宽度和基础样式 */
::v-deep .custom-map-popup .leaflet-popup-content-wrapper {
  width: 600px;
  /* 可同步调整内边距、圆角等样式 */
  padding: 12px;
  border-radius: 4px;
}
/* 控制内容区宽度、高度 */
::v-deep .custom-map-popup .leaflet-popup-content {
  width: 100% !important;
  margin: 0;
  /* 高度过大的问题可以通过以下配置解决，内容超出后自动出现滚动条 */
  max-height: 400px;
  overflow-y: auto;
}

动态内容适配方案 #

如果弹窗内容是接口请求等动态加载的，可能会出现内容渲染完成后弹窗尺寸计算错误的问题，可在内容加载完成后调用Popup实例的update()方法重新计算尺寸：

<l-popup ref="customPopup" :options="{ minWidth: 600 }" id="popup">
  <!-- 动态加载的内容 -->
</l-popup>

// 内容加载完成后执行
this.$nextTick(() => {
  this.$refs.customPopup.mapObject.update()
})

内容的提问来源于stack exchange，提问作者Manuel Gonçalves Barroso