HarmonyOS 鸿蒙Next 验证码输入框，有这种demo吗？

@CustomDialog //弹窗装饰器，自定义弹窗 struct CustomDialogExample { controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({}), }) services: Array<string> = [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ’ ', ‘0’, ‘X’] numbers: Array<number> = [1, 2, 3, 4, 5, 6] @State Inputs: Array<string> = []

build() { //设置弹窗内容 Column() { Text(‘请输入支付密码’) .fontSize(20) .margin({ top: 10, bottom: 10 }) Row({ space: 5 }) { ForEach(this.numbers, (item: number) => { Text(this.Inputs.length >= item ? ‘*’ : ‘’) .width(20) .height(20) .backgroundColor(’#C0C0C0’) .textAlign(TextAlign.Center) }) } .width(‘100%’) .height(‘15%’) .justifyContent(FlexAlign.Center) Grid() { ForEach(this.services, (service: string) => { GridItem() { Text(service) } .borderWidth(0.4) .borderColor(Color.Gray) .onClick(() => { if (service != ‘X’&& service != ’ ') { this.Inputs.push(service) if (this.Inputs.length == 6) { this.controller.close() } } if (service == ‘X’) { this.Inputs.pop() } }) }) } .width(‘100%’) .height(‘60%’) .rowsTemplate(‘1fr 1fr 1fr 1fr’) .columnsTemplate(‘1fr 1fr 1fr’) } .width(‘100%’) .height(‘100%’) .justifyContent(FlexAlign.SpaceBetween)

} } @Entry @Component struct Index { dialogController: CustomDialogController = new CustomDialogController({ //弹窗构造器，与装饰器相呼应 builder: CustomDialogExample(), }) build() { Column() { Button(‘支付’) .onClick(() => { this.dialogController.open() }) } .width(‘100%’) .height(‘100%’) .justifyContent(FlexAlign.SpaceAround) } }