Как изменить имя класса кнопки на Яндекс-картах на IE11? - PullRequest
Новая
       81

Как изменить имя класса кнопки на Яндекс-картах на IE11?

0 голосов
/ 24 января 2019

Я создаю пользовательскую кнопку со следующим кодом: 

const clusterShowButton = new ymaps.control.Button({ data: {
    content: SVG_CLUSTER_SHOW,
    title: 'Отключить кластеризацию',
    selectOnClick: true,
    size: 'small'
  }
});

После этого я пытаюсь назначить некоторый класс CSS: 

clusterShowButton._layout._buttonElement.className += 'my-button';

Это работает во всех браузерах, кроме Internet Explorer 11 (даже в Microsoft Edge). После дальнейшего изучения я понял, что в IE11 clusterShowButton._layout это ноль.

Вопросы:

  1. Как назначить пользовательский класс? (Я знаю, что не так корректно изменять частные свойства с именами подчеркивания)
  2. Это ошибка в Яндекс-картах?

1 Ответ

0 голосов
/ 25 января 2019

Вы можете обратиться к коду, чтобы добавить макет кнопки для пользовательской кнопки, затем добавьте класс: 

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map('map', {
            center: [55.650625, 37.62708],
            zoom: 10,
            controls: []
        }),

    /**
     * The button layout should display the 'data.content' field 
     * and change depending on whether the button was clicked or not.
     * The current size (small, medium, large) is calculated from the value of the 'maxWidth' option
     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.Button.xml#param-parameters
      */
        ButtonLayout = ymaps.templateLayoutFactory.createClass([
            '<div title="{{ data.title }}" class="my-button ',
            '{% if state.size == "small" %}my-button_small{% endif %}',
            '{% if state.size == "medium" %}my-button_medium{% endif %}',
            '{% if state.size == "large" %}my-button_large{% endif %}',
            '{% if state.selected %} my-button-selected{% endif %}">',
            '<img class="my-button__img" src="{{ data.image }}" alt="{{ data.title }}">',
            '<span class="my-button__text">{{ data.content }}</span>',
            '</div>'
        ].join('')),

        button = new ymaps.control.Button({
            data: {
                content: "Click-click-click",
                image: 'images/pen.png',
                title: "Click-click-click"
            },
            options: {
                layout: ButtonLayout,
                maxWidth: [170, 190, 220]
            }
        });

    myMap.controls.add(button, {
        right: 5,
        top: 5
    });
}

Более подробно, пожалуйста, проверьте Пользовательский макет кнопки .

...