HarmonyOS 密码输入组件？

Question

需求场景：修改密码输入原密码场景

Answer 1

请参考示例如下：

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 })
  }
}

登录密码限制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)