Riot.js - 访问标记元素的上下文以隐藏/显示该元素

Question

<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();
    };

提前致谢。

Answer 1

根据Riot.js的规格，我找不到任何可以让你跟踪相同类型的所有标签的东西，所以我能想到的针对这个特定场景的解决方案是在windows下存储工具提示的集合并在点击时显示/隐藏它们每个工具提示。

因为我没有你发布的所有组件，所以我在here上创建了最小的工作示例。

我的演示组件看起来像：

<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>

在mount事件中，它将自己添加到window.tooltips数组集合中，稍后当单击其中一个组件时，事件处理程序将遍历所有已注册的组件并在显示当前组件之前隐藏它们。

Answer 2

更新 - 我在这里使用防暴事件找到了更好的解决方案。将事件添加到窗口并在文档正文单击和其他触发器元素单击上侦听该事件，以便您获取所有工具提示的上下文并关闭它。