Field 输入框

介绍

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

引入

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

代码演示

基础用法

TIP

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

点我查看代码

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。

点我查看代码

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 属性可设置输入框是否只读。

点我查看代码

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 可显示输入框清除图标。

点我查看代码

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 选项来控制校验逻辑。

点我查看代码

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 插槽可以在输入框的尾部插入按钮。

点我查看代码

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 属性可以指定执行格式化的时机，默认在输入时进行格式化。

点我查看代码

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 可设置默认行数。

点我查看代码

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 属性后会在底部显示字数统计。

点我查看代码

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。

点我查看代码

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。

点我查看代码

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 属性可以开启点击反馈。

点我查看代码

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 插槽可自定义右侧内容。

点我查看代码

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: LengthMetrics.lpx(20) } }){
      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 \| Array[string \| number]	`''`
formId	唯一id, 当组件用于验证时必传	string	`''`
prop	绑定value的属性名, 当组件用于验证时必传	string	`''`
rules	验证规则列表, 可由form统一配置	Array[IBestFormRuleItem]	`[]`
label	输入框左侧文本	string	`''`
colon	是否在label后加冒号, 可由form统一配置	boolean	`false`
labelWidth	左侧文本宽度，默认单位为 lpx, 可由form统一配置	number	`160`
labelPosition	左侧文本位置, 可选值 `left` `top`, 可由form统一配置	string	`left`
labelAlign	左侧文本对齐方式, 可选值 `left` `center` `right`, 可由form统一配置	string	`left`
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	是否显示密码框末尾图标	boolean	`true`
autosize	输入框自适应高度	boolean	`false`
rows	默认行数, 仅当 `autosize` 为true时生效	number	`1`
maxlength	最大输入字符数, 默认不限制	number	`-1`
showWordLimit	是否显示字数统计, 需配合 `maxlength` 一起使用	boolean	`false`
inputAlign	输入框文字对齐方式, 可选值 `left` `center` `right`	string	`left`
required	是否显示表单必填星号	boolean	`false`
requireAsteriskPosition	星号的位置, 可选值 `left` `right`, 可由form统一配置	string	`left`
disabled	是否禁用, 可由form统一配置	boolean	`false`
readOnly	是否只读	boolean	`false`
clickable	是否开启点击反馈	boolean	`false`
isLink	是否展示右侧箭头并开启点击反馈	boolean	`false`
leftIcon	左侧图标	string \| Resource	`''`
leftIconColor	左侧图标颜色, 仅svg格式有效	string	`''`
rightIcon	右侧图标	string \| Resource	`''`
rightIconColor	右侧图标颜色, 仅svg格式有效	string	`''`
hasBorder	是否展示底部线条	boolean	`true`
clearable	是否启用清除图标，点击清除图标后会清空输入框	boolean	`false`
clearIcon	自定义清除图标	string \| Resource	`''`
clearTrigger	显示清除图标的时机, 可选值 `always` `focus`	string	`focus`
showMessage	是否显示验证信息, 可由form统一配置	boolean	`true`
formatter	格式化函数	(value: string) => string	`-`
formatTrigger	执行格式化函数触发时机, 可选值 `onchange` `onblur`	string	`onchange`

Events

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

插槽

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

Field 输入框 ​

介绍 ​

引入 ​

代码演示 ​

基础用法 ​

自定义类型 ​

禁用输入框 ​

显示图标 ​

必填星号 ​

插入按钮 ​

格式化输入内容 ​

高度自适应 ​

显示字数统计 ​

输入框内容对齐 ​

输入框文本位置 ​

点击反馈 ​

自定义右侧区域内容 ​

API ​

Props ​

Events ​

插槽 ​

Field 输入框

介绍

引入

代码演示

基础用法

自定义类型

禁用输入框

显示图标

必填星号

插入按钮

格式化输入内容

高度自适应

显示字数统计

输入框内容对齐

输入框文本位置

点击反馈

自定义右侧区域内容

API

Props

Events

插槽