animationbasic/commons/basic/src/main/ets/components/generalComp/YTSearch.ets

@Component
export struct YTSearch {
  //----搜索栏属性
  @State searchValue:string = ''
  //是否可以输入内容
  isEnable:boolean = true
  searchHeight:number = 36
  searchPadding:Padding|Length = {left:14,right:14}
  placeHolder:string = '请输入搜索内容'
  placeholderColor:ResourceColor = '#CC333333'
  placeholderFont:Font = {size:12}
  needLeftBuilder:boolean = true
  //----默认搜索图片属性 在传入leftBuilder或needLeftBuilder=false后无效
  src:ResourceStr = $r('app.media.search')
  imgWidth:Length = 24
  //----提交函数,回调以回传输入内容
  submit=(_:string)=>{

  }
  //----整体点击的处理函数
  click=()=>{

  }
  @BuilderParam leftBuilder:()=>void = this.defaultLeftBuilder
  @BuilderParam rightBuilder?:()=>void
  build() {
    Row(){
      if (this.needLeftBuilder){
        this.leftBuilder()
      }

      TextInput({text:$$this.searchValue,placeholder:this.placeHolder})
        .backgroundColor(Color.Transparent)
        .height('100%')
        .layoutWeight(1)
        .fontSize(12)
        .borderRadius(0)
        .placeholderFont(this.placeholderFont)
        .placeholderColor(this.placeholderColor)
        .padding(0)
        .caretColor('app.color.main_ac_color_dark')
        .enabled(this.isEnable)
        .onSubmit(()=>{
          this.submit(this.searchValue)
        })
      if (this.rightBuilder){
        this.rightBuilder()
      }
    }
    .padding(this.searchPadding)
    .borderRadius(this.searchHeight/2)
    .height(this.searchHeight)
    .width('100%')
    .border({width:1,color:$r('app.color.main_ac_color_dark')})
    .onClick(this.click)
  }

  @Builder
  defaultLeftBuilder(){
    Image(this.src)
      .width(this.imgWidth)
      .aspectRatio(1)
      .margin({right:4})
  }
}