HarmonyOS 鸿蒙Next验证码输入框的封装

HarmonyOS 鸿蒙Next验证码输入框的封装

验证码输入框样式的组件封装

待输入的样式：

输入中的样式：

核心代码：

//验证码输入框
interface codeOne {
  str: string ,
  isBorder: boolean
}

@Entry
@Component
export struct TextInputCodeView {
  // 验证码
  @State code: string = ''
  // 验证码位数
  @Prop
  someArrayLength: number = 4
  someArray: number[] = []


  aboutToAppear(): void {
    this.someArray = Array.from({length: this.someArrayLength})
  }

  build() {
    Stack() {
      Row() {
        ForEach(this.someArray, (item: number,index:number) => {
          //加间隙
          if (index != 0) {
            Blank()
          }
          //index + 1 ：表示输入框的位置。
          //填写验证码
          if (this.code.length >= index + 1 ) {
            this.OneText({ str:this.code.substring(index, index + 1),  isBorder: index + 1 === this.someArray.length})
          } else {
            //没有验证码
            this.OneText({
              str:'',
              isBorder: this.code.length + 1 === index + 1
            })
          }
        }, (item: number ,index: number) => JSON.stringify(index + 1))    //键值标识
      }
      .width('100%')

      TextInput({ placeholder: "" })
        .width('100%')
        .height('100%')
        .maxLength(this.someArray.length)
        .caretColor(Color.Transparent)
        .fontColor(Color.Transparent)
        .borderColor(Color.Transparent)
        .backgroundColor(Color.Transparent)
        .onChange((value: string) => {
          this.code = value
        })
        .onSubmit(async () => {
          //回车事件
        })
    }
    .width('100%')
    .height(60)
  }

  //参数：验证码内容，是否显示边框
  @Builder OneText(item:codeOne) {
    //判断，是否选中当前的输入框，是否有内容 。是当前选中的，没有内容，显示 |
    Text(item.isBorder && !item.str ? '|' : item.str as string)
      .width(50)
      .height(50)
      .textAlign(TextAlign.Center)
      .fontSize(20)
      .fontColor(item.isBorder && !item.str ?'#ffdd4f46' : Color.Black)
      .backgroundColor('#f3f4f6')
      .borderRadius(8)

  }
}