Aurelia 中的 Dropzone 实现在组件中不起作用

Question

我正在尝试将 dropzone 添加到 Aurelia 项目中。我关注了 Jeremy Danyow 的 example。

当我像他的示例项目一样设置项目时，一切正常。但我不想将所有内容都放入 main.js 和 main.html.

所以我尝试将 dropzone 功能封装到一个可重用的组件中，并将该组件添加到 main.html 视图中。

main.html

<template>
  <require from="dropzone/dropzone.min.css"></require>
  <require from="./components/dropzone"></require>
  <dropzone></dropzone>
</template>

components/dropzone.js

import dropzone from 'dropzone';

export class Dropzone {

  attached() {
    this.zone = new Dropzone(this.targetElement, { url: "/file/post"});
  }
}

components/dropzone.html

<template>
  <h2>Dropzone from components/dropzone.js</h2>
  <form class="dropzone" ref="targetElement"></form>
</template>

添加了对 aurelia.json

的依赖

          "dropzone",
          {
            "name": "dropzone",
            "path": "../node_modules/dropzone/dist/min",
            "main": "dropzone.min",
            "resources": [
              "dropzone.min.css"
            ]
          }

不幸的是，这不再有效了。

我的代码中缺少什么？

See the project in my git account

感谢您的任何建议。

Answer 1

dropzone 模块导出的 class 被命名为 Dropzone（根据您在下面的评论）。鉴于此，您需要更改自己的 class 名称。我推荐 DropzoneCustomElement。让我知道这是否有效：

main.html

<template>
  <require from="dropzone/dropzone.min.css"></require>
  <require from="./components/dropzone"></require>
  <dropzone></dropzone>
</template>

components/dropzone.js

import Dropzone from 'dropzone';

export class DropzoneCustomElement {

  attached() {
    this.zone = new Dropzone(this.targetElement, { url: "/file/post"});
  }
}

components/dropzone.html

<template>
  <h2>Dropzone from components/dropzone.js</h2>
  <form class="dropzone" ref="targetElement"></form>
</template>

Aurelia 中的 Dropzone 实现在组件中不起作用

Dropzone implementation in Aurelia not working in Component

dropzone.js

aurelia