使用 Vue2Leaflet 的 l-popup 组件调整传单弹出窗口的宽度答案

【问题标题】：Adapt width of leaflet popup using Vue2Leaflet's l-popup component使用 Vue2Leaflet 的 l-popup 组件调整传单弹出窗口的宽度
【发布时间】：2021-10-11 13:23:42
【问题描述】：

我正在编写一个 Web 应用程序并使用传单来显示地图。我定义了单击相应标记时出现的标记和弹出窗口。

不幸的是，弹出窗口目前看起来很奇怪（高度太大而宽度太小）。出于这个原因，我正在尝试调整弹出窗口的宽度。

我在 Vue2Leaflet 文档 (https://vue2-leaflet.netlify.app/components/LPopup.html) 中看到，我可以将 options 属性传递给 l-popup 组件。所以我尝试了以下方法：

<l-popup :options="{ width: 600 }" id="popup"></l-popup>

但它不起作用。如何正确传递宽度选项，以便弹出窗口的宽度发生变化？还是我走上了完全错误的道路？如果是，如何修改l-popup组件的宽度？

感谢您的帮助！

【问题讨论】：

标签： javascript vue.js leaflet vue2leaflet

【解决方案1】：

我也遇到了同样的问题。最后，我没有使用中的选项，而是使用了 CSS。

例子：

<l-popup class="map-popup"></l-popup>

然后简单地在 CSS 中设置我的元素样式：

.map-popup {
    min-width: 600px;
}

【讨论】：