npm 包 @appknox/ember-cli-intl-tel-input 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在移动互联网时代，电话号码验证是必不可少的一项功能。使用国际化电话输入框可以方便用户在输入电话号码时正确选择国家和地区代码，并且有效地避免了用户输入错误的电话号码。

而 @appknox/ember-cli-intl-tel-input 包可以帮助开发者快速构建一个国际化电话输入框。本文将对该包的使用进行详细介绍，包括安装、配置和使用步骤，并通过示例代码演示了如何在 Ember.js 项目中使用 @appknox/ember-cli-intl-tel-input 包。

安装

安装该包很简单，只需要在项目根目录中打开终端窗口，输入以下命令即可：

npm install @appknox/ember-cli-intl-tel-input --save

配置

安装成功后，我们需要在项目中使用包时进行配置。在项目 ember-cli-build.js 文件的 DefinedEnitty 方法中，添加以下代码：

// ember-cli-build.js

const app = new EmberApp(defaults, {
  'ember-cli-intl-tel-input': {
    includeUtilsScript: true,
    excludeCountries: ['us', 'ca'],
    preferredCountries: ['sg', 'my', 'id', 'th'],
    onlyCountries: ['sg', 'my', 'id', 'th', 'cn', 'jp', 'au', 'nz'],
    localizedCountries: {
      sg: '新加坡 (Singapore)',
      my: '马来西亚 (Malaysia)',
      id: '印度尼西亚 (Indonesia)',
      th: '泰国 (Thailand)',
      cn: '中国大陆 (China)',
      jp: '日本 (Japan)',
      au: '澳洲 (Australia)',
      nz: '新西兰 (New Zealand)'
    },
    utilsScript: 'assets/js/utils.js'
  }
});

上述配置中，摘选出以下参数需要进行详细说明：

includeUtilsScript：该属性指定是否加载电话输入框的辅助脚本，如果该属性的值为 true，你需要在 "utilsScript" 中添加辅助脚本的路径。
excludeCountries：该属性指定不需要显示的国家电话号码，该值应该是国家的 ISO 3166-1 alpha-2 代号，多个值之间可以使用英文逗号隔开。
preferredCountries：该属性指定默认情况下希望显示的国家号码。该值可为国家的 ISO 3166-1 alpha-2 代号或者国家区号，多个值之间可以加上英文逗号隔开。
onlyCountries：该属性指定仅需要显示的国家电话号码，该值应该是国家的 ISO 3166-1 alpha-2 代号，多个值之间可以使用英文逗号隔开。
localizedCountries：该属性指定国家的本地化名称。
utilsScript：该属性指定电话输入框的辅助脚本路径。

一般情况下，excludeCountries 和 onlyCountries 是互斥的，其中只有 onlyCountries 具有最高优先级。

使用

经过了配置后，我们就可以在项目中使用 @appknox/ember-cli-intl-tel-input 包了。在模版中添加以下代码：

{{intl-tel-input telInput='true' onlyCountries=onlyCountries}}

在控制器中添加以下代码：

// ...other code
export default Controller.extend({
  onlyCountries: ['us', 'ca', 'sg', 'my', 'id', 'th', 'cn', 'jp', 'au', 'nz']
});

控制器代码中的 onlyCountries 用于指定需要显示的国家国际化电话号码。

在模版中添加 intl-tel-input 元素，用于显示电话号码输入框。当用户选择国家和地区时，@appknox/ember-cli-intl-tel-input 包将自动选择适当的国际化电话号码格式。

示例代码

以下是一个完整的 Ember.js 项目中使用 @appknox/ember-cli-intl-tel-input 包的示例代码，供开发者参考。

// index.hbs

<div class="form-group">
  <label for="phone">联系电话：</label>
  <input type="tel"
         name="phone"
         class="form-control"
         id="phone"
         placeholder="请输入您的联系电话"
         required
         {{intl-tel-input telInput='true' onlyCountries=onlyCountries value=phone}}>
</div>

// index.js

import Controller from '@ember/controller';

export default Controller.extend({
  onlyCountries: ['us', 'ca', 'sg', 'my', 'id', 'th', 'cn', 'jp', 'au', 'nz'],
  actions: {
    submit() {
      alert(`手机号码：${this.get('phone')}`);
    }
  }
});

结语

本文详细介绍了 @appknox/ember-cli-intl-tel-input 包的安装、配置和使用方法，并提供了示例代码以供开发者参考。通过使用该包，可以更加方便、快速地构建国际化电话输入框，为用户提供更好的体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53e15