#鸿蒙通关秘籍#完整的验证码输入组件的实现方式是什么？

import { inputMethod } from '@kit.IMEKit';

@Component
export default struct VerifyCodeInput {
  // 参数定义
  @Prop iheight:number|string=48
  @Prop iwidth:number|string=48
  @Prop fontsize:number|string='20fp'
  @Prop count:number=6
  private inputController: inputMethod.InputMethodController = inputMethod.getController();
  private textConfig: inputMethod.TextConfig = {
    inputAttribute: {
      textInputType: inputMethod.TextInputType.NUMBER, // 只能输入数字
      enterKeyType: inputMethod.EnterKeyType.GO
    },
  };
  @Link inputCode: string
  @State countArr: number[] = new Array(this.count??6).fill(' ')
  private isFirst:boolean=true

  async onAttachInput(isFocus?:boolean) {
    try { await this.inputController.attach(isFocus??true, this.textConfig); }
    catch (e) { console.log(JSON.stringify(e)) }
  }

  async onDetachInput() {
    try { await this.inputController.detach() }
    catch (e) { console.log(JSON.stringify(e)) }
  }

  onInputEvent() {
    this.inputController.on("insertText", (text: string) => {
      if (text && this.inputCode.length < this.count && !isNaN(Number(text))) {
        this.inputCode += text;
      }
    })
    this.inputController.on("deleteLeft", (length: number) => {
      this.inputCode = this.inputCode.substring(0, this.inputCode.length - 1);
    })
  }

  offInputEvent(){
    this.inputController.off("insertText");
    this.inputController.off("deleteLeft");
  }

  aboutToDisappear() {
    this.offInputEvent()
    this.onDetachInput()
  }

  build() {
    Column() {
      Row() {
        // 布局和事件代码省略...
      }
    }.width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.