如何在 Vaadin 对话框中更改/覆盖属性指针事件

How to change/override property pointer-event in a Vaadin dialog

提问人：aha 提问时间：6/5/2023 更新时间：6/7/2023 访问量：94

问：

我们有一个第三方应用程序（仅限启动按钮），它始终显示在我们应用程序的最顶部。它工作正常，除了阻止交互的模式对话框。经过一番挖掘，我们注意到样式“pointer-events：none;”导致了这个问题。vaadin-dialog-overlay 继承该属性。

enter image description here

我们试图通过扩展对话框来解决这个问题，在创建对话框时将指针事件设置为自动

UI.getCurrent().getElement().getStyle().set("pointer-events", "auto");

并在对话框关闭时删除指针事件。

UI.getCurrent().getElement().getStyle().remove("pointer-events");

不幸的是，此解决方案仅在某些情况下有效。我们还尝试更改 openChangeListener 中的属性。

请帮忙。我们正在使用 Vaadin 14。

先谢谢你。

对话框 vaadin pointer-events

评论

1赞 cfrick 6/5/2023
“works only in some cases” 是什么意思？它仅适用于某些类型的对话框？它只时不时地起作用？在代码的哪个位置运行代码（c'tor、attach、open 等）
0赞 aha 6/5/2023
感谢您的快速回复。1. 如果在对话框顶部打开对话框。2.打开编辑表单（不是对话框），然后打开一个对话框，在某些情况下它可以工作，在某些情况下它不能，但是如果对话框关闭并再次打开，它就可以工作。
0赞 aha 6/5/2023
有没有办法在加载对话框后更改指针事件？
0赞 aha 6/6/2023
如果我想在打开模式对话框时将“pointer-events”设置为“auto”，那么进行设置的最佳位置是什么（添加代码：UI.getCurrent（）.getElement（）.getStyle（）.set（“pointer-events”， “auto”）;)？

答：

1赞 Oliver 6/7/2023 #1

您可以将其设置为非模态：

Dialog dialog = new Dialog();

dialog.setModal(false);

https://vaadin.com/docs/latest/components/dialog/#modality

上一个：如何在 Vaadin Flow 中显示 OverLay 时将正文样式“pointer-events”更改为“auto”？

下一个：我怎样才能实现 pointerEvent all 不影响 react-three-fiber 中的 raycaster？