您可以在上传时使用 vaadin 按钮吗？答案

【问题标题】：Can you use a vaadin-button in upload?您可以在上传时使用 vaadin 按钮吗？
【发布时间】：2021-05-20 18:35:58
【问题描述】：

所有上传示例都显示在以编程方式创建上传时使用 NativeButton。我想使用作为设计器布局一部分的按钮（vaadin 按钮）。当我尝试这个时，我看到以下错误：

Caused by: java.lang.IllegalArgumentException: Trying to detach an element from parent that does not have it.
    at com.vaadin.flow.dom.impl.AbstractNodeStateProvider.removeChild(AbstractNodeStateProvider.java:123)
    at com.vaadin.flow.dom.Node.removeChild(Node.java:376)
    at com.vaadin.flow.dom.Element.removeFromParent(Element.java:577)
    at com.vaadin.flow.dom.Node.insertChild(Node.java:293)
    at com.vaadin.flow.dom.Node.appendChild(Node.java:141)
    at com.vaadin.flow.component.upload.GeneratedVaadinUpload.addToAddButton(GeneratedVaadinUpload.java:1344)
    at com.vaadin.flow.component.upload.Upload.setUploadButton(Upload.java:276)

我们在 CDI 模式下使用 Vaadin 14。

【问题讨论】：

你能提供更多的上下文（代码）吗？作为一个健全的检查，我尝试使用 14.6.1 的 Custom components upload 示例，并且只是将 NativeButton 交换为 Button 在那个有限的示例中工作正常。我可能不太了解你的情况。
如果我以编程方式创建 vaadin 按钮，它可以工作，但如果按钮是由设计器在 .js 文件中创建的，则不能。

标签： vaadin vaadin-flow vaadin14 vaadin-designer

【解决方案1】：

要使用Designer更改上传按钮，需要将按钮拖入层级中的上传中，然后添加slot="add-button"属性。

您的模板最终应如下所示：

<vaadin-upload>
 <vaadin-button slot="add-button">
   Button 
 </vaadin-button>
</vaadin-upload>

请注意，您必须在层次结构面板中执行此操作。

如果这没有帮助（也许您已经这样做了），您是否可以包含一些代码来显示您正在尝试做的事情？

【讨论】：

工作谢谢。如果这被记录在案并且不必浪费时间尝试调试它，那就太好了。

【解决方案2】：

我刚刚在我们的 Designer 存储库 https://github.com/vaadin/designer/issues/2399 中为此改进创建了一个问题。

欢迎评论。

【讨论】：