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>

组件/ dropzone.js

import dropzone from 'dropzone';

export class Dropzone {

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

组件/ 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模块导出的类名为Dropzone（根据您的评论如下）。鉴于此，您需要更改自己的类名。我建议DropzoneCustomElement。如果有效，请告诉我：

main.html中

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

组件/ dropzone.js

import Dropzone from 'dropzone';

export class DropzoneCustomElement {

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

组件/ dropzone.html

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

Aurelia中的Dropzone实现无法在Component

1 个答案: