如何使用 vue js 自定义小册子 Lopup 组件答案

【问题标题】：How to customize the leaflet Lopup component with vue js如何使用 vue js 自定义小册子 Lopup 组件
【发布时间】：2022-08-22 10:46:46
【问题描述】：

我如何自定义leafletjs 的LPopup 组件的设计。遵循本指南：
https://vue2-leaflet.netlify.app/components/LPopup.html#demo

在 devtool 中检查了 Lpopup，然后抓住选择器调用 \'leaflet-popup-content-wrapper\' abd 然后为其添加了一些 Css 样式（请参见下图），但它没有给出边框半径：0px。它显示在该弹出窗口中。这是我不想要的。

 <l-popup class=\"map-popup\">
         <h1>{{ name.toLocaleUpperCase().substring(0, 2) }}</h1>
         <h3>{{ address }}</h3>
 </l-popup>

和我的 CSS：

.map-popup,
.leaflet-popup-content-wrapper {
  background: #2c3e50;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  border-radius: 0px;
}

// also tried this way, but nothing seems to work for me: 

.leaflet-popup-content-wrapper {
  background: #2c3e50;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  border-radius: 0px;
}

我想在没有\'border-radius\'的情况下看到下面的样子。我怎样才能做到这一点。非常感谢您的任何帮助。提前致谢！

标签： javascript vue.js leaflet popup

【解决方案1】：

我通过在App.vue 中将以下 CSS 添加到我的全局应用程序样式中来实现此功能

.leaflet-popup-content-wrapper {
    border-radius: 0 !important;
}

【讨论】：