HarmonyOS 密码输入组件

请参考示例如下：

const MEETING_PWD_INPUT_KEY = 'MEETING_PWD_INPUT_KEY';
@Builder
export function XYPasswordIcon() {
  Row().width(8).height(8).borderRadius(8).backgroundColor(Color.Black)
}
@Entry
@Component
struct Password {
  @State message: string = 'Hello World';
  @State outputDigits: (string)[] = new Array(6).fill('');
  updatePassword: (pwd: string) => void = () => {
  };
  build() {
    Column() {
      Stack() {
        TextInput()
          .type(InputType.NUMBER_PASSWORD)
          .opacity(0)
          .maxLength(6)
          .width(1)
          .height(1)
          .showPasswordIcon(false)
          .key(MEETING_PWD_INPUT_KEY)
          .onChange((value: string) => {
            this.outputDigits = value.padEnd(6, " ").split("");
            if (value.length === 6) {
              // this.updatePassword(value);
            }
          })

        Row() {
          ForEach(this.outputDigits, (item: string, index: number) => {
            Column() {
              if (item.trim()) XYPasswordIcon();
            }
            .width(40)
            .height(40)
            .borderWidth(index === 5 ? 0 : { right: 0.5, top: 0, left: 0, bottom: 0 })
            .borderColor(Color.Gray)
            .backgroundColor(Color.Transparent)
            .borderRadius(0)
            .alignItems(HorizontalAlign.Center)
            .justifyContent(FlexAlign.Center)
          })
        }
        .width(240)
        .height(40)
        .borderWidth(0.5)
        // .borderColor(Color.Red)
        .borderRadius(5)
        .onClick(() => {
          focusControl.requestFocus(MEETING_PWD_INPUT_KEY)
        })
      }
    }
    .width(288)
    .backgroundColor(Color.White)
    .borderRadius(10)
    .padding({ left: 24, right: 24, top: 18, bottom: 24 })
  }
}
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.
60.
61.

登录密码限制6-20位数字或者字母：

@State message: string = '';
@State state: boolean = false;
TextInput({text:this.message})
  .type(InputType.Password)
  .showPasswordIcon(false)
  .inputFilter('[0-9A-Za-z]')
  .maxLength(20)
  .onChange((v)=>{
    this.message=v
    console.log(this.message.length+'')
    if (this.message.length >= 6) {
      this.state = true
    }else{
      this.state = false
    }
  })
Button('下一步').enabled(this.state)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.