Vaadin Accordion with Button 总结答案

【问题标题】：Vaadin Accordion with Button in summaryVaadin Accordion with Button 总结
【发布时间】：2021-08-30 15:18:27
【问题描述】：

在我的 Vaadin 14 应用程序中，我想添加一个 Accordion 组件，它的摘要中有多个组件（始终显示），其中一个 Button。单击摘要通常会切换 AccordionPanel 内容的显示。单击摘要中的按钮时，如何防止AccordionPanel 折叠/展开？

对象的创建简单如下：

Accordion accordion = new Accordion();

MyPanel panel = new MyPanel();

accordion.add(panel);

使用 MyPanel 构造函数只需使用包含按钮的布局调用 setSummary()。

【问题讨论】：

您能否添加一个代码示例来说明您是如何创建组件的？
@ollitietavainen 只需 new Button(...) 然后添加一个点击监听器，没什么特别的。
不，我的意思是Accordion、AccordionPanel等等。

标签： vaadin vaadin-flow vaadin14

【解决方案1】：

我找到了答案in this thread on the forum。

事实证明，您可以使用此 hack 阻止按钮单击的传播：

button.getElement().addEventListener("click", click -> {
        //do nothing
}).addEventData("event.stopPropagation()");

这似乎是框架应该提供开箱即用的核心功能，但this ticket 仍然开放。

【讨论】：

【解决方案2】：

将此添加到您的视图中：

    UI.getCurrent().getPage()
    .executeJs("Array.from(document.getElementsByTagName('vaadin-accordion-panel')).forEach(element=>element.shadowRoot.querySelector(\"div[role=button]\").replaceWith(element.shadowRoot.querySelector(\"div[role=button]\").cloneNode(true)))");

将禁用对所有手风琴切换和手风琴摘要的所有点击。但是，您需要包含一个按钮或触发器来打开和关闭手风琴。不知道这是不是你想要的？

【讨论】：

不，我希望正常行为继续工作。我只是不希望按钮单击事件由按钮的单击侦听器处理并且不传播到手风琴。
澄清一下：您希望按钮完全只读，并且与单击摘要中的其他位置没有任何不同？
@AnnaKoskinen 否：我希望按钮能够像通常那样工作，但不会触发手风琴打开/关闭切换。单击按钮旁边的按钮，应该会像往常一样触发打开/关闭切换。