如何在Aurelia中导入和使用RobinHerbots的Inputmask

时间:2018-04-30 16:38:33

标签: jquery typescript aurelia jquery-inputmask input-mask

我正在尝试在Aurelia中使用RobinHerbots' Inputmask但似乎无法正确导入它。

我遇到过在Aurelia讨论过使用此插件的人,但我找不到有关如何执行此操作的具体文档。

npm i inputmask --save之后我的aurelia.json

{
   "name": "inputmask",
   "path": "../node_modules/inputmask/dist",
   "main": "jquery.inputmask.bundle",
   "deps": [
      "jquery"
      ]
}

package.json我宣布inputmask

"dependencies": {
//...
"inputmask": "^3.3.11",
//...
}

我发现au build没有运行错误。但是,当我使用ES6导入时,我无法使用它的任何属性。

import Inputmask from "inputmask";

attached() {
     let im = new Inputmask('999-99-9999');
     let select = document.getElementById('social-security-number-field');
     im.mask(select);
}

收益Unhandled promise rejection TypeError: inputmask_1.default is not a constructorUncaught TypeError: Cannot read property 'value' of undefined

Inputmask error in the console

当我尝试使用data-inputmask属性时,它也不起作用。

<input type="text" class="form-control" id="social-security-number-field" value.bind="ssn" data-inputmask="'mask': '999-99-9999'">

Input is not successfully masked using data-inputmask

我错过了什么吗?我只有经验导入专为Aurelia明确表示可以与Aurelia一起使用的插件,所以我确实可能错过了一些重要的东西。

1 个答案:

答案 0 :(得分:0)

jquery.inputmask.bundle.js捆绑包不是很兼容。他们将它与webpack捆绑在一起。它没有任何默认导出,可能只适用于webpack。

尝试导入常规构建输出:

{
   "name": "inputmask",
   "path": "../node_modules/inputmask/dist/inputmask",
   "main": "inputmask",
   "deps": ["jquery"]
}

这将需要您可能需要包含在aurelia.json中的其他依赖项,但如果是这种情况,您将收到适当的警告。

编辑:

您还应该从以下位置更改导入语句:

import inputmask from "inputmask";

为:

import * as inputmask from "inputmask";

inputmask没有默认导出,这就是导入语句不起作用的原因。