Блог

Главная - Вопросы по программированию - Как задать класс в многоугольнике vue2leaflet?

Как задать класс в многоугольнике vue2leaflet?

#javascript #vue.js #leaflet #vue2leaflet

Вопрос:

Как я могу задать класс в компоненте 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?

Метки: