How can I set a class in a vue2leaflet component? I made a rectangle in a sample and I tried to set another class to it, so I wrote class = "myClass" and :class="myClass" in the tag and it doesn't work, I've ispected the rectangle with the browser development tool and the class I've chosen is not set.
new Vue({
el: '#app',
components: {
'l-map': window.Vue2Leaflet.LMap,
'l-tile-layer': window.Vue2Leaflet.LTileLayer,
'l-rectangle': window.Vue2Leaflet.LRectangle
},
data: {
center: [47.326456, -1.3133],
zoom: 11,
rectangle: {
bounds: [[47.341456, -1.397133], [47.303901, -1.243813]],
style: { color: 'red', weight: 3 }
}
}
})#map {
height: 100vh;
width: 100vw;
}
.pulse {
color: #cca92c;
animation: pulse 1s infinite;
}
@-webkit-keyframes pulse {
0% {
color: #0099ff;
opacity: 0.5;
}
50% {
color: #000000;
opacity: 1;
}
100% {
color: #0099ff;
opacity: 0.5;
}
}<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/vue2-leaflet@2.7.1/dist/vue2-leaflet.min.js"></script>
<div id="app">
<l-map id="map" :zoom="zoom" :center="center" ref="map">
<l-tile-layer
:attribution="'x'"
:url="'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'"
></l-tile-layer>
<l-rectangle class="pulse" :bounds="rectangle.bounds"
:l-style="rectangle.style"></l-rectangle>
</l-map>
</div>How can I set the class that I want in the <l-rectangle> to make animations with CSS?
