HarmonyOS 鸿蒙Next组件封装之输入框

HarmonyOS 鸿蒙Next组件封装之输入框

组件封装

输入框在项目中经常出现，特别是在办公系统中更是经常使用，为了统一样式和方便使用通常我们会封装。

代码实例

import { TableData } from '../viewmodel/WaitDeal'
import { emitter } from '@kit.BasicServicesKit';

@Component
export struct TXTInPutComponent {
  @Prop content: string = "";
  tips: string = ""
  onClickOK?: () => void;
  @Consume dataShow: Set<TableData>;
  @State text:string=""
  aboutToAppear(): void {

  }

  build() {
    Stack({ alignContent: Alignment.Center }) {
      Column() {

        Row() {
          Text(this.tips)
            .fontSize(14)
            .fontColor('#999999')
            .textAlign(TextAlign.Start)
            .margin({ left: 15 })
        }.width('100%')

        Row() {
          TextInput({ placeholder: '请输入' + this.tips, text:this.content})
            .textAlign(TextAlign.Start)
            .borderRadius(0)
            .margin({ left: 16,top:8 })
            .onChange((value: string) => {
              this.text = value
            })
            .onEditChange((isEditing: boolean)=>{
                  if(!isEditing)
                  {
                    console.info("请输入", this.text);

                    Array.from(this.dataShow.entries()).forEach((item) => {
                      if (item[0].name == this.tips) {
                        item[0].field_value =  this.text;
                      }
                    })

                    if (this.onClickOK !== undefined) {
                      this.onClickOK();
                    }
                  }
            })
            /*
            .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => {
                console.info("请输入", this.text);

                Array.from(this.dataShow.entries()).forEach((item) => {
                  if (item[0].name == this.tips) {
                    item[0].field_value =  this.text;
                  }
                })

            if (this.onClickOK !== undefined) {
              this.onClickOK();
            }
          })
          */
        }.width('100%')


        Divider()
          .strokeWidth(2)
          .color('#eeeeee')
      }
    }.width('100')


  }
}