介绍
sdmasker-ionic-3 是一个基于 Angular 和 Ionic 框架开发的前端组件库，用于掩码输入，可以下拉选择、手动输入等方式进行值的填充。本文将详细介绍如何使用该 npm 包。
安装
在使用之前，需要先安装 sdmasker-ionic-3，可以通过以下指令进行全局安装：
npm install sdmasker-ionic-3 -g
也可以通过在项目中安装：
npm install sdmasker-ionic-3 --save
使用
引入组件
在需要使用组件的页面中引入 SdmaskerComponent 组件：
-- -------------------- ---- ------- ------ - ----------------- - ---- ------------------- ------------ --------- ----------- ------------ ----------------- ---------- ------------------ -- ------ ----- -------- - ------------- -- -
基本用法
在需要使用组件的页面中加入模板，模板中使用 sdmasker 标签，结合 mask 属性设置掩码：
<sdmasker mask="(99) 9-9999-9999"></sdmasker>
可选项
组件还支持以下可选配置项：
dropDownItems:Array<any>，下拉框选项，必须是以下格式的一个数组：[{ value: string, text: string }]，value是提交的值，text是展示的文本。dropDownListHeight:string，下拉框的高度，默认是100px。
事件
组件可对以下事件进行监听：
ionBlur: 当用户完成输入并移除焦点时触发。ionChange: 当用户输入、删除、下拉选择、手动输入等操作时触发，可以获取当前掩码框的值。ionInput: 当用户进行输入操作时触发。
示例代码
在 home.page.html 中加入以下代码：
<sdmasker mask="(99) 99999-9999" placeholder="(__) _____-____" (ionBlur)="onBlur($event)" (ionChange)="onChange($event)" [dropDownItems]="dropDownItems" ></sdmasker>
在 home.page.ts 中加入以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- -------------------
------------
--------- -----------
------------ -----------------
---------- -------------------
--
------ ----- -------- -
------ ------------- - -
- ------ ------ ----- ----- --
- ------ ----- ----- ---- --
- ------ ------ ----- ----- --
- ------ ------- ----- ------ --
--
------------- --
------------- ----------------- -
--------------------- --------------------
-
--------------- ----------------- -
----------------------- --------------------
-
-总结
通过本文，你学会了如何在 Ionic 3 项目中使用 sdmasker-ionic-3 组件库。组件库提供了丰富的可选项和事件，可以满足大多数掩码输入的需求。希望本文对你有所指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005669d81e8991b448e2d51