1

如何在 vue2leaflet 组件中设置类？我在示例中制作了一个矩形，并尝试为其设置另一个类，所以我在标签中写了class = "myClass"和:class="myClass"它不起作用，我用浏览器开发工具检查了矩形，我选择的类是没有设置。

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>

如何设置我想要的类<l-rectangle>以使用 CSS 制作动画？

4

0 回答 0