NumberKeyboard 数字键盘

介绍

虚拟数字键盘，可以配合密码输入框组件或自定义的输入框组件使用。

引入

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

代码演示

基础用法

点我查看代码

import { IBestCellGroup, IBestCell } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State value: string = ''
  build() {
    Column(){
      IBestCellGroup({ inset: true }) {
        IBestCell({
          title: "默认键盘",
          value: this.value,
          clickable: true,
          onClickCell: () => {
            this.visible = true
          }
        })
      }
      IBestNumberKeyboard({
        visible: $visible,
        value: $value,
        onInput: (value: string) => {
          console.log("输入：" + value)
        },
        onDelete: () => {
          console.log("删除")
        },
        onClose: () => {
          console.log("关闭")
        }
      })
    }
  }
}

带右侧栏的键盘

点我查看代码

import { IBestCellGroup, IBestCell } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State value: string = ''
  build() {
    Column(){
      IBestCellGroup({ inset: true }) {
        IBestCell({
          title: "带右侧栏的键盘",
          value: this.value,
          clickable: true,
          onClickCell: () => {
            this.visible = true
          }
        })
      }
      IBestNumberKeyboard({
        visible: $visible,
        value: $value,
        styleType: "custom",
        extraKey: ".",
        closeBtnText: "完成"
      })
    }
  }
}

身份证号键盘

点我查看代码

import { IBestCellGroup, IBestCell } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State value: string = ''
  build() {
    Column(){
      IBestCellGroup({ inset: true }) {
        IBestCell({
          title: "身份证号键盘",
          value: this.value,
          clickable: true,
          onClickCell: () => {
            this.visible = true
          }
        })
      }
      IBestNumberKeyboard({
        visible: $visible,
        value: $value,
        extraKey: "X"
      })
    }
  }
}

带标题的键盘

TIP

通过 title 属性可以设置键盘标题, 为空时不显示标题栏。

点我查看代码

import { IBestCellGroup, IBestCell } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State value: string = ''
  build() {
    Column(){
      IBestCellGroup({ inset: true }) {
        IBestCell({
          title: "带标题的键盘",
          value: this.value,
          clickable: true,
          onClickCell: () => {
            this.visible = true
          }
        })
      }
      IBestNumberKeyboard({
        visible: $visible,
        value: $value,
        title: "键盘标题",
        extraKey: "."
      })
    }
  }
}

配置多个按键的键盘

TIP

当 styleType 为 custom 时，支持以数组的形式配置两个 extraKey。

点我查看代码

import { IBestCellGroup, IBestCell } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State value: string = ''
  build() {
    Column(){
      IBestCellGroup({ inset: true }) {
        IBestCell({
          title: "配置多个按键的键盘",
          value: this.value,
          clickable: true,
          onClickCell: () => {
            this.visible = true
          }
        })
      }
      IBestNumberKeyboard({
        visible: $visible,
        value: $value,
        styleType: "custom",
        extraKey: ["00", "."],
        closeBtnText: "完成"
      })
    }
  }
}

配置随机数字的键盘

点我查看代码

import { IBestCellGroup, IBestCell } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State value: string = ''
  build() {
    Column(){
      IBestCellGroup({ inset: true }) {
        IBestCell({
          title: "配置随机数字的键盘",
          value: this.value,
          clickable: true,
          onClickCell: () => {
            this.visible = true
          }
        })
      }
      IBestNumberKeyboard({
        visible: $visible,
        value: $value,
        isRandomKeyOrder: true
      })
    }
  }
}

最大长度

点我查看代码

import { IBestCellGroup, IBestField } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State value: string = ''
  build() {
    Column(){
      IBestField({
        label: "最大长度",
        value: $value,
        readOnly: true,
        clickable: true,
        placeholder: "点此输入",
        hasBorder: false,
        onFieldClick: () => {
          this.visible = true
        }
      })
      IBestNumberKeyboard({
        visible: $visible,
        value: $value,
        maxLength: 6
      })
    }
  }
}

API

@Props

参数	说明	类型	默认值
visible	控制键盘显隐, 支持双向绑定	boolean	false
value	当前输入的值, 支持双向绑定	string	''
title	顶部标题文字	string	''
extraKey	额外按键	string | string[]	''
closeBtnText	关闭按钮文字	string	完成
deleteButtonText	删除按钮文字, 为空时显示图标	string	''
styleType	样式风格, 可选值为 default custom	string	default
isRandomKeyOrder	是否随机排序	boolean	false
maxLength	最大长度, 默认不限制	number	-1

Events

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