一个ionic2的PIN码输入组件
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'){
// 忘记密码
}
})
}
}
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 |
是否可以点击遮罩关闭组件 |