IBest-UI-V2

Appearance

PasswordInput 密码输入框 ​

介绍 ​

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

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

TIP

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

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

自定义长度 ​

自定义长度

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: string = '123'
  build() {
    Column(){
      IBestPasswordInput({
        value: this.value!!,
        inputLength: 4
      })
    }
  }
}

格子间距 ​

格子间距

TIP

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

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: string = '123'
  build() {
    Column(){
      IBestPasswordInput({
        value: this.value!!,
        space: 20
      })
    }
  }
}

明文展示 ​

明文展示

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: string = '123'
  build() {
    Column(){
      IBestPasswordInput({
        value: this.value!!,
        isHidden: false
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: string = '123'
  build() {
    Column({space: 14}){
      IBestPasswordInput({
        value: this.value!!,
        bdColor: '#3d8af2',
        cellTextColor: '#3d8af2'
      })
      IBestPasswordInput({
        value: this.value!!,
        space: 12,
        cellBgColor: "#1c1c1e",
        cellTextColor: "#fff"
      })
    }
  }
}

提示信息 ​

提示信息

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

API ​

@Props ​

参数说明类型默认值
value当前输入框的值, 支持双向绑定string''
inputLength输入框长度number6
inputHeight输入框高度string | number50
space格子间距string | number0
radius格子圆角,当 space 不为0时有效string | number5
isHighlightCurrent是否高亮当前正在输入的格子,当 space 不为0时有效booleantrue
highlightColor格子高亮颜色,当 space 不为0时有效ResourceColor#3D8AF2
isHidden是否隐藏内容booleantrue
tip提示文字string''
errorTip错误提示文字string''
useSystemKeyboard是否使用系统键盘, 默认使用自定义键盘booleanfalse
numberKeyboardConfig自定义键盘配置项NumberKeyboardConfig-
isShowBorder是否显示边框线booleantrue
bdColor边框线颜色ResourceColor#ebedf0
cellBgColor格子背景色ResourceColor#fff
cellTextColor格子文字颜色ResourceColor#323233
dotFontSize黑点大小string | number40
textFontSize明文展示时文字大小string | number20
tipFontSize提示文字大小string | number16
autoFocus自动聚焦booleanfalse
showCursor是否显示闪烁光标booleantrue
highlightType格子高亮类型, 可选值为 shadow borderstringborder

NumberKeyboardConfig 数据结构 ​

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

Events ​

事件名说明事件类型
onFieldClick点击输入框后触发() => void
onFinish输入完成后触发() => void

主题定制 ​

组件提供了下列颜色变量，可用于自定义深色/浅色模式样式，使用方法请参考 颜色模式 章节，如需要其它颜色变量可提 issue。

名称描述默认值
ibest_password_input_background密码输入框背景色#fff
ibest_password_input_text_color密码输入框文字颜色#323233
ibest_password_input_border_color密码输入框边框颜色#ebedf0