IBest-UI@HarmonyOS

Appearance

Field 输入框 ​

介绍 ​

用户可以在文本框内输入或编辑文字。

引入 ​

ts
import { IBestField } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

TIP

通过 value 属性可绑定输入框的值, 使用 $ 可双向绑定。

点我查看代码
ts
import { IBestCellGroup } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value: string = ""
  
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value,
          label: "文本",
          placeholder: "请输入文本",
          hasBorder: false
        })
      }
    }
  }
}

自定义类型 ​

自定义类型

TIP

通过 type 属性可指定输入框的类型, 默认为 normal。

点我查看代码
ts
import { IBestCellGroup } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value1: string = ""
  @State value2: string = ""
  @State value3: string = ""
  @State value4: string = ""
  
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        // 密码
        IBestField({
          value: $value1,
          label: "密码",
          placeholder: "请输入密码",
          type: "password"
        })
        // 手机号
        IBestField({
          value: $value2,
          label: "手机号",
          placeholder: "请输入手机号",
          type: "phone"
        })
        // 整数数字
        IBestField({
          value: $value3,
          label: "整数",
          placeholder: "请输入整数",
          type: "number"
        })
        // 小数
        IBestField({
          value: $value4,
          label: "小数",
          hasBorder: false,
          placeholder: "请输入小数",
          type: "decimal"
        })
      }
    }
  }
}

禁用输入框 ​

禁用输入框

TIP

通过 disabled 属性可设置输入框是否禁用, 通过 readonly 属性可设置输入框是否只读。

点我查看代码
ts
import { IBestCellGroup } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value1: string = '输入框只读'
  @State value2: string = '输入框已禁用'
  
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value1,
          label: "文本",
          readOnly: true
        })
        IBestField({
          value: $value2,
          label: "文本",
          hasBorder: false,
          disabled: true
        })
      }
    }
  }
}

显示图标 ​

显示图标

TIP

通过 leftIcon rightIcon 属性可设置输入框左、右侧的图标, clearable 可显示输入框清除图标。

点我查看代码
ts
import { IBestCellGroup } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value1: string = ''
  @State value2: string = '一蓑烟雨任平生'
  
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value1,
          label: "文本",
          placeholder: "请输入文本",
          leftIcon: "https://ibestui.ibestservices.com/favicon.ico",
          rightIcon: $r("app.media.arrow_right")
        })
        IBestField({
          value: $value2,
          label: "文本",
          placeholder: "请输入文本",
          hasBorder: false,
          clearable: true
        })
      }
    }
  }
}

必填星号 ​

必填星号

TIP

通过 required 属性来展示必填星号。
• 请注意 required 属性只用于控制星号展示，在进行表单校验时，需要使用 rule.required 选项来控制校验逻辑。

点我查看代码
ts
import { IBestCellGroup } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value: string = ''
  
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value,
          label: "文本",
          placeholder: "请输入文本",
          hasBorder: false,
          required: true
        })
      }
    }
  }
}

插入按钮 ​

插入按钮

TIP

通过 buttonBuilder 插槽可以在输入框的尾部插入按钮。

点我查看代码
ts
import { IBestCellGroup, IBestButton } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value: string = ''
  @State count: number = 60
  @State timer: number = 0
  @Builder sendCodeButton() {
    IBestButton({
      text: this.count == 60 ? '发送验证码' : `重新发送(${this.count})`,
      type: 'primary',
      buttonSize: 'mini',
      onClickBtn: () => {
          this.sendCode()
      }
    })
  }
  sendCode() {
    if (this.timer) {
      return
    }
    this.count = 60
    this.timer = setInterval(() => {
      if (this.count > 0) {
        this.count--
      } else {
        clearInterval(this.timer)
        this.timer = 0
        this.count = 60
      }
    }, 1000)
  }
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value,
          label: "短信验证码",
          placeholder: "请输入验证码",
          hasBorder: false,
          buttonBuilder: (): void => this.sendCodeButton()
        })
      }
    }
  }
}

格式化输入内容 ​

格式化输入内容

TIP

通过 formatter 属性可以对输入的内容进行格式化，通过 `formatTrigger 属性可以指定执行格式化的时机，默认在输入时进行格式化。

点我查看代码
ts
import { IBestCellGroup } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value1: string = ''
  @State value2: string = ''
  formatValue(value: string){
    return value.replace(/\d/g, '')
  }
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value1,
          label: "文本",
          placeholder: "在输入时执行格式化",
          formatter: (value: string): string => this.formatValue(value)
        })
        IBestField({
          value: $value2,
          label: "文本",
          placeholder: "在失焦时执行格式化",
          hasBorder: false,
          formatter: (value: string): string => this.formatValue(value),
          formatTrigger: "onBlur"
        })
      }
    }
  }
}

高度自适应 ​

高度自适应

TIP

通过 autosize 属性可以设置高度自适应, 通过 rows 可设置默认行数。

点我查看代码
ts
import { IBestCellGroup } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value: string = ''
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value,
          label: "留言",
          placeholder: "请输入留言",
          hasBorder: false,
          autosize: true,
          rows: 3
        })
      }
    }
  }
}

显示字数统计 ​

显示字数统计

TIP

通过设置 showWordLimit 和 maxlength 属性后会在底部显示字数统计。

点我查看代码
ts
import { IBestCellGroup } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value1: string = ''
  @State value2: string = ''
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value1,
          label: "文本",
          placeholder: "请输入文本",
          maxlength: 30,
          clearable: true,
          showWordLimit: true
        })
        IBestField({
          value: $value2,
          label: "文本",
          placeholder: "请输入文本",
          hasBorder: false,
          autosize: true,
          rows: 3,
          maxlength: 100,
          clearable: true,
          showWordLimit: true
        })
      }
    }
  }
}

输入框内容对齐 ​

输入框内容对齐

TIP

通过 inputAlign 属性可以设置输入框内容对齐方式, 默认为 left。

点我查看代码
ts
import { IBestCellGroup } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value: string = ''
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value,
          label: "文本",
          placeholder: "输入框内容右对齐",
          hasBorder: false,
          inputAlign: "right"
        })
      }
    }
  }
}

输入框文本位置 ​

输入框内容对齐

TIP

通过 labelPosition 属性可以设置文本位置, 默认为 left; 通过 labelAlign 属性可以设置文本对齐方式, 默认为 left。

点我查看代码
ts
import { IBestCellGroup } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value1: string = ''
  @State value2: string = ''
  @State value3: string = ''
  @State value4: string = ''
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value1,
          label: "文本",
          placeholder: "顶部对齐",
          labelPosition: "top"
        })
        IBestField({
          value: $value2,
          label: "文本",
          placeholder: "左对齐",
          labelAlign: "left"
        })
        IBestField({
          value: $value3,
          label: "文本",
          placeholder: "居中对齐",
          labelAlign: "center"
        })
        IBestField({
          value: $value4,
          label: "文本",
          placeholder: "右对齐",
          labelAlign: "right",
          hasBorder: false
        })
      }
    }
  }
}

点击反馈 ​

点击反馈

TIP

通过 isLink 属性可以开启点击反馈。

点我查看代码
ts
import { IBestCellGroup } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value: string = ''
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value,
          label: "地区",
          placeholder: "点击选择地区",
          hasBorder: false,
          isLink: true,
          onFieldClick: () => {
            console.log("点击")
          }
        })
      }
    }
  }
}

自定义右侧区域内容 ​

自定义右侧区域内容

TIP

通过 customRightContent 插槽可自定义右侧内容。

点我查看代码
ts
import { IBestCellGroup, IBestRadioGroup, IBestRadio } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value: string = ''
  @Builder radioContent() {
    IBestRadioGroup({
      group: 'group1',
      onChange: val => {
        console.log('group1', val)
      }
    })
    Flex({ wrap: FlexWrap.Wrap, space: { main: 10 } }){
      IBestRadio({
        label: '单选框1',
        name: '1',
        group: 'group1'
      })
      IBestRadio({
        label: '单选框2',
        name: '2',
        group: 'group1'
      })
    }
    .width("100%")
  }
  build() {
    Column(){
      IBestCellGroup({inset: true}) {
        IBestField({
          value: $value,
          label: "文本",
          hasBorder: false,
          customRightContent: (): void => this.radioContent()
        })
      }
    }
  }
}

API ​

@Props ​

参数说明类型默认值
value当前输入的值, 支持双向绑定string | number | boolean | (string | number)[]''
formId唯一id, 当组件用于验证时必传string''
prop绑定value的属性名, 当组件用于验证时必传string''
rules验证规则列表, 可由form统一配置IBestFormRuleItem[][]
label输入框左侧文本string''
colon是否在label后加冒号, 可由form统一配置booleanfalse
labelWidth左侧文本宽度，可由form统一配置number | string80
labelPosition左侧文本位置, 可选值 left top, 可由form统一配置stringleft
labelAlign左侧文本对齐方式, 可选值 left center right, 可由form统一配置stringleft
placeholder输入框占位提示文字string''
type输入框类型, autosize 为true时, 可选值 normal password email number phone username number-password decimal ; autosize 为false时, 可选值 normal email number phone decimal, 其他无效string'normal'
decimalLength小数点位数, 仅当type为decimal时生效, 默认不限制number-1
showPasswordIcon是否显示密码框末尾图标booleantrue
autosize输入框自适应高度booleanfalse
rows默认行数, 仅当 autosize 为true时生效number1
maxlength最大输入字符数, 默认不限制number-1
showWordLimit是否显示字数统计, 需配合 maxlength 一起使用booleanfalse
inputAlign输入框文字对齐方式, 可选值 left center rightstringleft
required是否显示表单必填星号booleanfalse
requireAsteriskPosition星号的位置, 可选值 left right, 可由form统一配置stringleft
disabled是否禁用, 可由form统一配置booleanfalse
readOnly是否只读booleanfalse
clickable是否开启点击反馈booleanfalse
isLink是否展示右侧箭头并开启点击反馈booleanfalse
leftIcon左侧图标ResourceStr''
leftIconColor左侧图标颜色, 仅svg格式有效ResourceColor''
rightIcon右侧图标ResourceStr''
rightIconColor右侧图标颜色, 仅svg格式有效ResourceColor''
hasBorder是否展示底部线条booleantrue
clearable是否启用清除图标，点击清除图标后会清空输入框booleanfalse
clearIcon自定义清除图标ResourceStr''
clearTrigger显示清除图标的时机, 可选值 always focusstringfocus
showMessage是否显示验证信息, 可由form统一配置booleantrue
formatter格式化函数(value: string) => string-
formatTrigger执行格式化函数触发时机, 可选值 onchange onblurstringonchange
labelFontSize 1.19.0左侧字体大小number | string14
labelColor 1.19.0左侧字体颜色ResourceStr#323233
letIconSize 1.19.0左侧图标大小number | string14
rightIconSize 1.19.0右侧图标大小number | string14
showLabel 2.0.0是否显示labelbooleantrue

Events ​

事件名说明回调参数
onChangevalue变化时触发value: string | number | boolean | (string | number)[]
onClear点击清除按钮时触发-
onFieldClick点击组件时触发-
onFieldFocus输入框获得焦点时触发-
onFieldBlur输入框失去焦点时触发-
onLeftIconClick左侧图标点击时触发-
onRightIconClick右侧图标点击时触发-

插槽 ​

插槽名说明类型
buttonBuilder右侧按钮CustomBuilder
customRightContent右侧内容, 使用该插槽后, 与输入框相关的属性和事件将失效CustomBuilder