Question

使用产品:iclient-leaflet

问题详细描述:

我在vue2组件中的地图上使用了leaflet的popup组件，我通过设置html字符串设置popup的内容，其中有一个按钮具有class名。我在当前vue的style标签中，设置按钮的css样式，但是并没有起作用。

// map.vue  组件
<script>
//....核心代码
// popup内容
const popupContent =
'<h3>详情</h3>' +
'<p>' + '<b>地址：</b>' + null + '</p>' +
'<p>' + '<b>电话：</b>' + null + '</p>' + +
'<button class="popupBtn" style="width: 100%;background-color:none">' + '按钮' + '</button>'

// 实例化popup对象并设置内容
const popupTemplate = L.popup)_
popupTemplate.setContent(popupContent)
layer.bindPopup(popupTemplate)
</script>

<style>
.popupBtn {
  //...一些样式
}
</style>

请问我要如何操作才能为该按钮设置css样式，因为css样式比较复杂，所以不能使用document.getElementByclass.style一个一个设置css样式，太过复杂

Answer 1

您好，这个不从iclient的产品角度去进行修改，而是从vue本身的样式控制比较容易实现，

比如vue的样式穿透，https://blog.csdn.net/weixin_45468454/article/details/106094385

也可以参考这个文档来进行调整，https://blog.csdn.net/supermapsupport/article/details/90676753

希望可以帮助到您。