IBest-UI

Appearance

CarKeyboard 数字键盘 ​

介绍 ​

带网格的输入框组件，通常与车牌输入框组件或其它自定义输入框配合使用。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
import { IBestCell } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State value: string = ''
  build() {
    Column(){
      IBestCell({
        title: '默认键盘',
        value: this.value,
        clickable: true,
        onCellClick: () => {
          this.visible = true
        }
      })
      IBestCarKeyboard({
        visible: $visible,
        value: $value
      })
    }
  }
}

最大长度 ​

最大长度

点我查看代码
ts
import { IBestCell } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State value: string = ''
  build() {
    Column(){
      IBestCell({
        title: '最大长度',
        value: this.value,
        clickable: true,
        onCellClick: () => {
          this.visible = true
        }
      })
      IBestCarKeyboard({
        visible: $visible,
        value: $value,
        maxLength: 7
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
import { IBestCell } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State value: string = ''
  build() {
    Column(){
      IBestCell({
        title: '自定义样式',
        value: this.value,
        clickable: true,
        onCellClick: () => {
          this.visible = true
        }
      })
      IBestCarKeyboard({
        visible: $visible,
        value: $value,
        title: "车牌键盘",
        keyHeight: 36
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
visible控制键盘显隐, 支持双向绑定booleanfalse
value当前输入的值, 支持双向绑定string''
maxLength最大长度number8
title顶部标题文字ResourceStr''
confirmBtnText确认按钮文字ResourceStr完成
keyHeight按键高度number | string42

Events ​

事件名说明回调参数
onInput按下按键后触发value: string
onDelete点击删除键时触发-
onClose点击关闭键时触发-
onConfirm点击完成键时触发value: string