简介
ember-intl-tel-input2 是一个用于 Ember.js 项目的集成了 intl-tel-input 的电话号码输入组件。它提供了一种简单、易于集成和使用的方法来处理电话号码输入和验证。
功能特性
- 输入框中显示国旗和电话区号
- 支持 249 种国家（包括台湾、香港等地区）
- 集成了 Google's libphonenumber library，可以实现电话号码的格式化、归属地判断等功能
- 支持表单验证
- 支持自定义国家列表
- 可以集成到页面上任何一个输入框中
安装
首先，你需要拥有一个 Ember.js 项目。如果你还没有，则需要先创建一个。
打开你的项目的终端窗口，输入以下命令：
ember install ember-intl-tel-input2
这将会自动安装
ember-intl-tel-input2包以及所需的依赖包。
配置
默认情况下，
ember-intl-tel-input2组件只需要被放置在你的模板文件中：{{ember-intl-tel-input2 value=model.phoneNumber}}这将会在模板文件中直接创建出一个电话号码输入框。
如果你需要在控制器或组件中对输入组件进行操作，则需要将其引用出来：
-- -------------------- ---- ------- ------ - ------ -- ------- - ---- ----------------- ------ ---------- ---- -------------------- ------ ------- ------------------- ------------- ---------- -------- - ------------ - -------------------------------------- -- ----------------- - ----------------------------- -------- -- ----------- - ------------------------------------------- -- -- ---默认情况下，
ember-intl-tel-input2样式表将会被加载。如果你的项目有自定义的样式表，则可以在ember-cli-build.js中进行如下配置：-- -------------------- ---- ------- ----- --- - --- ------------------ - -- -- --------------------- ----------------- ------------- - ------------------- ----- -- ---- ----------------- --- ----------------- ----- -- -------------- ------ ----------------- ------- -- -------- -------------- ------- -- --------- ------------------- ------- -- ----------- ------------ -------- ---------- - -- -- ---- --- ------------ -- ----- ------------------------- -------- -- --- ------------------------ ------ - --- ----------- - ----- -- ------------- - ------------ - --- ---------------------- --- -- -- ---
示例代码
-- -------------------- ---- ------- ----------------------- -- ------ ----------------------- -- ---- --------------------- --------------------------- --------------------------------- ------------------------------------- ---------------------- --------------------- -------------------- --------------- ------------------ -------------------- -- ---- --------------------------- ------------ ------------------------- ------------ --
以上就是 ember-intl-tel-input2 的使用教程了。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc581e8991b448e646d