可自定义的Pin code输入组件-angular-code-input

可自定义的Pin code输入组件-angular-code-input
插件名称 angular-code-input
发布时间 2020年5月21日
插件作者 AlexMiniApps

用于基于Angular的Web和移动应用程序的简单,可定制的Pincode(一次性密码)输入组件。

支持平台:

Angular 7、8、9 +
Ionic 4、5 +
移动浏览器和WebViews:Android和iOS
桌面浏览器:Chrome,Firefox,Safari,Edge v.79 +
其他浏览器: Edge v.41-44(无代码隐藏功能)

安装:

# NPM
$ npm install angular-code-input --save

使用:

导入组件。

import { CodeInputModule } from 'angular-code-input';
@NgModule({
  imports: [
    CodeInputModule
  ]
})

将组件添加到模板。

<code-input 
  [isCodeHidden]="false"
  [isNonDigitsCode]="false"
  [codeLength]="4"
  (codeChanged)="onCodeChanged($event)"
  (codeCompleted)="onCodeCompleted($event)">
</code-input>

所有默认选项:

// code 数量
codeLength = 4;

// 仅显示数字或不
isNonDigitsCode = false;

// 隐藏 code
isCodeHidden = false;

// 清除
isPrevFocusableAfterClearing = true;

// 输入类型
inputType = 'tel';

// 初始 code
code?: string | number;