Riot.js - Доступ к контексту элементов тега, чтобы скрыть / показать этот элемент

<tooltip message="Click Tooltip" content="Click tooltip preview"></tooltip>
    <tooltip message="Click Tooltip 1" class="repeat-tooltip" content="Click tooltip 1 preview"></tooltip>
    <tooltip trigger="hover" class="repeat-tooltip" message="Hover Tooltip" content="Hover tooltip preview"></tooltip>

Новичок в Riot.js пытается создать пользовательский тег всплывающей подсказки, и одновременно будет активна только одна подсказка.

   <tooltip>
       <p class="tooltip-content" control="tooltip">{ message } ref="target"</p>
       <div class="tooltip-wrapper" show={show_message} ref="content">
          //inner html
       </div>
   </tooltip>

Попытка использовать show toggling значение show_message для отображения и скрытия подсказок. Но show_message находится в контексте этого конкретного события click элемента. При нажатии на конкретную подсказку, как я могу получить доступ к контексту другого пользовательского тега, чтобы скрыть значение этого конкретного элемента, если эта подсказка уже открыта?

   this.root.addEventListener('click', (e) => that.toggle_message(e));

   this.toggle_message = function(e) {
        //here close all other tooltips before opening this one. How can I access the refs of all the open tooltip?

        this.show_message = !this.show_message;
        this.update();
    };

Заранее спасибо.

Источник

2 ответа

Решение

Из спецификации Riot.js Я не смог найти ничего, что позволило бы вам отслеживать все теги одного и того же типа, поэтому решение, которое я могу придумать для этого конкретного сценария, состоит в том, чтобы хранить коллекцию всплывающих подсказок под окнами и показывать / скрывать их по щелчку каждой отдельной подсказки.

Поскольку у меня нет всех компонентов, которые вы опубликовали, я создал здесь минимальный рабочий пример.

Мой демо-компонент выглядит так:

<tooltip>
    <p>{ content }</p>
    <span riot-style="display: { show_message ? 'inline-block' : 'none' }; background: black; color: white; padding:3px;"> { message } </span>
        const self = this;

    this.content = opts.content || '';
    this.message = opts.message || '';
    this.root.addEventListener('click', (e) => self.showTooltip(e));
    this.toggle_message = function(show) { 
      self.show_message = show;
        self.update();
    };
    this.showTooltip = function(e){
      const bShow = !self.show_message;
        for(var i=0; i<window.tooltips.length; i++){
          window.tooltips[i].toggle_message(false);
        }
        self.toggle_message(bShow);
    };

    <script>
      this.on('mount', function(){
        if(!window.tooltips)
          window.tooltips = [];

        window.tooltips.push(this);
      });
    </script>
</tooltip>

При монтировании событие добавляет себя window.tooltips коллекция массивов, а затем при нажатии на один из компонентов обработчик событий выполняет итерацию по всем зарегистрированным компонентам и скрывает их перед отображением текущего компонента.

Источник

Обновление - я нашел лучшее решение здесь, используя события бунта. Добавьте события в окна и прослушайте это событие по щелчку тела документа и по щелчку других элементов триггера, чтобы вы получили контекст всех всплывающих подсказок и закрыли его.

Источник
Другие вопросы по тегам