0

Опишу проблему: Имеется приложение на VueJs, основная задача которого установка меток на карте и управление ими. Имеется массив координат этих самых меток и соответственно данные для каждой из них. На основе этих данных мы расставляем метки на карте и задаём булунам меток разный контент, который может динамически менять свою высоту прямо во время отображения балуна. И если во время изначального отображения балуна, в нём не было горизонтального скролла, а высота контента балуна увеличилась, то часть контента обрезается, хотя в идеале должен просто появится горизонтальный скрол.

Создал небольшой стенд для демонстрации проблемы: jsfiddle

<script type="text/x-template" id="template-vue-balloon" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div>
    <div v-for="item in items" v-text="item"></div>
    <button @click="addItem()">Кликни и увеличишь высоту контента</button>
  </div>
</script>
let map,
  placemark;

const VueBalloon = Vue.extend({
  template: '#template-vue-balloon',
  data: function() {
    return {
      items: [],
    };
  },

  methods: {
    addItem: function() {
      this.items.push(Math.random());
    },
  },
});

ymaps.ready(function() {
  map = new ymaps.Map('map', {
    center: [55.751574, 37.573856],
    zoom: 9
  }, {
    searchControlProvider: 'yandex#search'
  });

  const balloonContentLayout = ymaps.templateLayoutFactory.createClass('<div id="vue-balloon"><div>', {
    build() {
      balloonContentLayout.superclass.build.call(this);
      vueBalloon = new VueBalloon({
        data: () => ({
          items: this.getData().geoObject.properties.get('items'),
        }),
      }).$mount('#vue-balloon');
    },
    clear() {
      vueBalloon.$destroy();
      vueBalloon = null;
      balloonContentLayout.superclass.clear.call(this);
    },
  });

  placemark = new ymaps.Placemark(map.getCenter(), {
    hintContent: 'Кликни меня!'
  }, {
    balloonContentLayout: balloonContentLayout,
    balloonPanelMaxMapArea: 0,
    balloonMaxWidth: 600,
    balloonMaxHeight: 600,
  });

  placemark.balloon.setData();
  placemark.balloon.getData().geoObject.properties.set('items', ['Изначальная строка']);

  map.geoObjects.add(placemark);
});

Было бы идеально, если бы можно было как то программно запустить обновление размеров балуна. Ибо если балун закрыть и открыть по новой - его размеры обновляются и все выглядит нормально.

1 ответ 1

0

Простейший способ для текущего кода просто закрывать и открывать балун снова при изменении содержимого:

  methods: {
    addItem: function() {
      this.items.push(Math.random());
      placemark.balloon.close();
      placemark.balloon.open();
    },
  }

Но вы это и сами сказали.

1
  • Ну да, этот вариант работает, но может есть какие то другие способы? В документации ничего подобного не увидел.
    – MrAnger
    Commented 7 июн. 2020 в 8:20

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.