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 value: string = '123'
  build() {
    Column({space: 14}){
      IBestPasswordInput({
        value: $value,
        bdColor: '#3d8af2',
        cellTextColor: '#3d8af2'
      })
      IBestPasswordInput({
        value: $value,
        space: 12,
        cellBgColor: "#1c1c1e",
        cellTextColor: "#fff"
      })
    }
  }
}

提示信息 ​

提示信息

点我查看代码
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输入框高度number | string50
space格子间距number | string0
radius格子圆角,当 space 不为0时有效number | string5
isHighlightCurrent是否高亮当前正在输入的格子,当 space 不为0时有效booleantrue
highlightColor格子高亮颜色,当 space 不为0时有效ResourceColor#3D8AF2
isHidden是否隐藏内容booleantrue
tip提示文字string''
errorTip错误提示文字string''
useSystemKeyboard是否使用系统键盘, 默认使用自定义键盘booleanfalse
numberKeyboardConfig自定义键盘配置项NumberKeyboardConfig-
isShowBorder 1.19.0是否显示边框线booleantrue
bdColor 1.19.0边框线颜色ResourceColor#ebedf0
cellBgColor 1.19.0格子背景色ResourceColor#fff
cellTextColor 1.19.0格子文字颜色ResourceColor#323233
dotFontSize 1.19.0黑点大小number | string40
textFontSize 1.19.0明文展示时文字大小number | string20
tipFontSize 1.19.0提示文字大小number | string16

NumberKeyboardConfig 数据结构 ​

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

Events ​

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