iBest-UI@HarmonyOS

Appearance

PasswordInput 密码输入框 ​

介绍 ​

带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与数字键盘组件配合使用。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

TIP

通过设置 useSystemKeyboard 属性为 true , 可使用系统键盘。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = '123'
  build() {
    Column(){
      IBestPasswordInput({
        value: $value,
        numberKeyboardConfig:{
          extraKey: ".",
          styleType: "custom"
        }
      })
    }
  }
}

自定义长度 ​

自定义长度

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = '123'
  build() {
    Column(){
      IBestPasswordInput({
        value: $value,
        inputLength: 4
      })
    }
  }
}

格子间距 ​

格子间距

TIP

通过 space 属性可以设置格子间距, 以下属性仅在space不为0时生效:
• radius 设置单个格子圆角;
• isHighlightCurrent 设置是否高亮当前正在输入的格子;
• highlightColor 设置高亮颜色。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = '123'
  build() {
    Column(){
      IBestPasswordInput({
        value: $value,
        space: 20
      })
    }
  }
}

明文展示 ​

明文展示

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = '123'
  build() {
    Column(){
      IBestPasswordInput({
        value: $value,
        isHidden: false
      })
    }
  }
}

提示信息 ​

提示信息

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State @Watch("valueChange") value: string = '123'
  @State errorTip: string = ''
  valueChange(){
    if (this.value.length === 6 && this.value !== '123456') {
      this.errorTip = '密码错误'
    } else {
      this.errorTip = ''
    }
  }
  build() {
    Column(){
      IBestPasswordInput({
        value: $value,
        tip: "密码为6位数字",
        errorTip: this.errorTip
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
value当前输入框的值, 支持双向绑定string''
inputLength输入框长度number6
inputHeight输入框高度,单位lpxnumber100
space格子间距,单位lpxnumber0
radius格子圆角,当 space 不为0时有效,单位lpxnumber10
isHighlightCurrent是否高亮当前正在输入的格子,当 space 不为0时有效booleantrue
highlightColor格子高亮颜色,当 space 不为0时有效string#3D8AF2
isHidden是否隐藏内容booleantrue
tip提示space文字string''
errorTip错误提示文字string''
useSystemKeyboard是否使用系统键盘, 默认使用自定义键盘booleanfalse
numberKeyboardConfig自定义键盘配置项NumberKeyboardConfig-

NumberKeyboardConfig 数据结构 ​

参数说明类型默认值
title键盘标题string''
extraKey额外按键string | string[]''
closeBtnText关闭按钮文字string完成
deleteButtonText删除按钮文字, 为空时显示图标string''
styleType样式风格, 可选值为 default customstringdefault
isRandomKeyOrder是否随机排序booleanfalse

Events ​

事件名说明回调参数
onFieldClick点击输入框后触发-