Question

vaadin-upload 3.0.0＆＃34;自定义文件列表＆＃34;仍然使用来自vaadin-upload-file.html的javascript代码，即使我在Shadow Root插槽中提供了我自己的HTML。

我不确定这＆＃34;是否按设计工作＆＃34;，＆＃34;是一个错误＆＃34;或者我可能不了解Shadow Root v1插槽。

我尝试使用＆＃34;自定义文件列表＆＃34;自定义vaadin-upload。类似于此处所述https://vaadin.com/elements/vaadin-upload/html-examples/upload-advanced-demos

<vaadin-upload id="fileEventsDemo" files="{{files}}">
  <div slot="file-list">
    <h4>Files</h4>
    <ul>
      <template is="dom-repeat" items="{{files}}" as="file">
        <li>
          <strong>[[file.name]]</strong>
          [[file.status]]
        </li>
      </template>
    </ul>
  </div>
</vaadin-upload>

根据我对Shadow Root v1的理解，这应该替换使用vaadin-upload.html元素的<vaadin-upload-file>中的后备内容

<slot name="file-list">
  <div id="fileList" part="file-list">
    <template is="dom-repeat" items="[[files]]" as="file">
      <vaadin-upload-file file="[[file]]"></vaadin-upload-file>
    </template>
  </div>
</slot>

所以我假设<vaadin-upload-file>以某种方式消失了，我不必照顾它，只会考虑我的HTML。我实际上假设根本不存在vaadin-upload-file的DOM实例。（虽然它是<link rel="import" href="vaadin-upload-file.html">）

导入的vaadin-upload.html

但我仍然可以在vaadin-upload-file.html _formatProgressValue(progress)或_fileAborted(abort)中的各种JavaScript函数中设置断点，并在用户与组件交互时调用它们。

_fileAborted(abort)会触发file-remove事件，这一点尤其棘手。因为它最终将采用此vaadin-upload.html方法。

_removeFile(file) {
   this.splice('files', this.files.indexOf(file), 1);
}

当我尝试使用按钮实现我自己的文件列表<my-file-list>时，＃Ab;＆＃34; Abort＆＃34; （触发file-abort事件）类似于vaadin-upload-list.html

中的事件

<vaadin-upload ...
    <div slot="file-list" id="fileList">
      <template is="dom-repeat" items="[[files]]" as="file">
        <my-upload-file file="[[file]]"></my-upload-file>
      </template>
    </div>
</vaadin-upload>

然后多次调用this.splice('files', this.files.indexOf(file), 1);。来自我的事件以及来自和indexOf可能是否定的。

然后，多个项目正从文件列表中消失，而不仅仅是应该删除的项目。

我正在使用Ubuntu和Chrome版本65.0.3311.3（官方构建）dev（64位）进行调试。该项目使用Polymer 2.3.1和vaadin-upload 3.0.0

如何在vaadin-upload 3.0.0＆＃34;自定义文件列表＆＃34;

0 个答案: