Как импортировать и использовать маску ввода RobinHerbots в Аурелии - PullRequest
Новая
       28

Как импортировать и использовать маску ввода RobinHerbots в Аурелии

0 голосов
/ 30 апреля 2018

Я пытаюсь использовать Inputbink RobinHerbots '1002 * в Aurelia, но не могу импортировать его правильно.

Я встречал людей, обсуждающих использование этого плагина в 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 constructor и Uncaught TypeError: Cannot read property 'value' of undefined

Ошибка маски ввода в консоли

Когда я пытаюсь использовать атрибут data-inputmask, он тоже не работает. 

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

Ввод не был успешно замаскирован с использованием маски ввода данных

Я что-то упустил? У меня был только опыт импорта плагинов, специально предназначенных для Aurelia, или было указано, что их можно использовать с Aurelia, поэтому я действительно мог упустить что-то жизненно важное.

1 Ответ

0 голосов
/ 30 апреля 2018

Этот jquery.inputmask.bundle.js комплект не очень совместим. Они связали это с веб-пакетом. Он не имеет экспорта по умолчанию и, вероятно, работает только с веб-пакетом.

Попробуйте импортировать выходные данные обычной сборки: 

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

Для этого потребуются и другие зависимости, которые вам, возможно, потребуется включить в aurelia.json, но в этом случае вы получите соответствующее предупреждение.

Edit:

Вы должны также изменить свой оператор импорта с:

import inputmask from "inputmask";

до:

import * as inputmask from "inputmask";

У входной маски нет экспорта по умолчанию, поэтому этот оператор импорта не будет работать.

...