ionic2-pincode-input

一个ionic2的PIN码输入组件

live demo

安装

npm install ionic2-pincode-input --save

使用

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
...

import { PincodeInputModule } from  'ionic2-pincode-input';

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    PincodeInputModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

your-page.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { PincodeController } from  'ionic2-pincode-input/dist/pincode'
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  code:string;

  constructor(
    public navCtrl: NavController,
    public pincodeCtrl: PincodeController,
  ) {
  }

  openPinCode():any{

    let pinCode =  this.pincodeCtrl.create({
      title:'Pincode'
    });

    pinCode.present();

    pinCode.onDidDismiss( (code,status) => {

      if(status === 'done'){
        // 输入完成
        this.code = code;
      }else if (status === 'forgot'){
        // 忘记密码
      }

    })

  }

}

create(PincodeOpt)

PincodeOpt

Name	Type	Default	Description
cssClass	string	''	空格分开
passSize	number	6	你的密码长度
title	String	'password'	标题
cancelButtonText	String	'cancel'	取消按钮文字
encoded	Function	(c) => {return c}	用于在返回code前编码的函数
forgotPasswordText	String	'forgot password'	忘记密码的文字
hideToolbar	Boolean	false	隐藏工具栏
hideForgotPassword	Boolean	false	隐藏忘记密码按钮
hideCancelButton	Boolean	false	隐藏取消按钮
enableBackdropDismiss	Boolean	true	是否可以点击遮罩关闭组件