如何在Aurelia中正确导入并使用RobinHerbots' Inputmask

我来帮你搞定这个导入和配置的问题！结合你已经做的操作，我们一步步来完善：

1. 先确认jQuery的配置是否到位 #

因为你用的是jquery.inputmask.bundle，它依赖jQuery才能正常运行，所以首先要确保jQuery已经在aurelia.json里正确配置，而且要放在inputmask配置的前面（保证加载顺序）：

{
  "name": "jquery",
  "path": "../node_modules/jquery/dist",
  "main": "jquery"
}

2. 调整导入与全局注册 #

配置好aurelia.json后，你有两种导入方式可选：

• 全局导入：在main.js里添加导入，这样所有组件都能直接使用Inputmask：

  import 'inputmask';
  

• 按需导入：只在需要使用的组件里导入：

  import 'inputmask';
  

3. 在组件中实际使用Inputmask #

方式一：在生命周期钩子中初始化 #

在你的组件JS文件里，利用attached钩子给输入框绑定掩码：

import { inject } from 'aurelia-framework';
import $ from 'jquery';

@inject(Element)
export class YourComponent {
  constructor(element) {
    this.element = element;
  }

  attached() {
    // 示例：给类名为phone-input的输入框添加手机号掩码
    $(this.element).find('.phone-input').inputmask('+99999999999');
  }
}

对应的视图代码：

<input type="text" class="phone-input" placeholder="请输入手机号">

方式二：自定义Aurelia属性（更优雅的复用方式） #

你可以封装一个自定义属性，这样在视图里就能直接用，不用每次都写初始化代码：

1. 创建inputmask-attribute.js文件：

import { bindable, customAttribute, inject } from 'aurelia-framework';
import $ from 'jquery';

@customAttribute('inputmask')
@inject(Element)
export class InputmaskAttribute {
  @bindable mask;

  constructor(element) {
    this.element = element;
  }

  bind() {
    $(this.element).inputmask(this.mask);
  }

  unbind() {
    // 组件销毁时移除掩码，避免内存泄漏
    $(this.element).inputmask('remove');
  }
}

2. 在main.js里全局注册这个属性（或者在单个组件里引入）：

import { Aurelia } from 'aurelia-framework';

export async function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  // 全局注册自定义属性，路径根据你的文件位置调整
  aurelia.globalResources('./resources/attributes/inputmask-attribute');

  await aurelia.start();
  aurelia.setRoot('app');
}

3. 在视图里直接使用：

<input type="text" inputmask="+99999999999" placeholder="请输入手机号">

4. 常见问题排查 #

• 如果报错找不到Inputmask，检查aurelia.json里的path是否正确，确认../node_modules/inputmask/dist下存在jquery.inputmask.bundle.js文件；
• 确保jQuery版本和Inputmask 3.x兼容，尽量避免使用过于最新的jQuery版本；
• 如果你用的是Webpack配置的Aurelia项目而非CLI，配置逻辑会略有不同，但你当前用的是aurelia.json，所以上面的步骤完全适用。

内容的提问来源于stack exchange，提问作者flea