# carid_input

**Repository Path**: tuxingzhe/carid_input

## Basic Information

- **Project Name**: carid_input
- **Description**: 这是 openHarmony   一个通用的车牌号输入键盘组件
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-07-28
- **Last Updated**: 2026-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# carid_input 车牌号输入键盘

这是一个通用的车牌号输入键盘组件, 按键震动反馈.

![效果图预览](https://tuxingzhe-image.oss-cn-chengdu.aliyuncs.com/ohpm/carid_input/preview.gif)

## 安装
`ohpm i @liqianliang/carid_input`

## 权限
| 权限名称 | 权限代码                    | 功能描述                |
|------|-------------------------|---------------------|
| 振动器  | ohos.permission.VIBRATE | 用于按键时的震动反馈，有更好的用户体验 |

## 普通输入框使用车牌号键盘

前提：必须把‘TextInput组件的控制器’使用透传给到后代组件使用
```typescript
@Provider('CaridInputCtl') controller: TextInputController = new TextInputController();
```

### 使用示例
``` javascript
import {CaridInput} from '@liqianliang/carid_input'

@Entry
@ComponentV2
export struct CheckedRen {
  // 定义一个变量来存值
  @Local carid: string = ''
  // 用到自定义输入法时的必要操作
  @Provider('CaridInputCtl') controller: TextInputController = new TextInputController();

  @Builder
  CustomCaridInput() {
    // 配置键盘
    CaridInput({ value: this.carid!! })
  }

  build() {
    Column() {
      TextInput({ controller: this.controller, text: this.carid})
        .customKeyboard(this.CustomCaridInput()) // 绑定自定义键盘
    }
      .height('100%')
  }
}
```




### 参数
| 属性                    | 类型            | 默认值     | 必填 | 描述       |
|-----------------------|---------------|---------|----|----------|
| value                 | string        | ’‘      | 是  | 双向绑定数据   |
| maxLength             | number        | 8       | 否  | 输入最大长度   |


### 事件
| 属性        | 返回值                         | 描述              |
|-----------|-----------------------------|-----------------|
| $value    | (value: string) => {}       | 输入字符改变后触发       |
| onClose   | () => {}                    | 关闭键盘后触发         |
| onKeyDown | (key: ICaridInputKey) => {} | 按键按下后触发, 返回按键字符 |


事件用法如下：
``` typescript
import {CaridInput, ICaridInputKey} from './CaridInput'

CaridInput({
  // !! 代表数据双向绑定
  value: this.idCard!!,
  $value: (value: string) => {
    console.log('字符串改变了' + value)
  },
  onClose: () => {
    console.log('键盘关闭了')
  },
  onKeyDown: (key: ICaridInputKey) => {
    console.log(key.value)
  }
})
```

## 车牌输入框组件 `CaridInputUI`

### 使用
``` typescript
import {CaridInput, CaridInputUI} from '@liqianliang/carid_input'

@Entry
@ComponentV2
export struct CheckedRen {
  // 定义一个变量来存值
  @Local carid: string = ''
 
  build() {
    Column() {
      CaridInputUI({value: this.carid!!})
    }
  }
}
```

### CaridInputUI 属性
| 属性                    | 类型                          | 默认值             | 必填 | 描述       |
|-----------------------|-----------------------------|-----------------|----|----------|
| value                 | string                      | ’‘              | 是  | 双向绑定数据   |
| fontSize              | number                      | 20              | 否  | 方格文字大小   |
| squareBackgroundColor | string, Color               | #f1f1f1         | 否  | 方格背景颜色   |
| squareHeight          | number                      | 40              | 否  | 方格高度     |
| dropColor             | string, Color               | #999            | 否  | 圆点颜色     |
| activeIndexColor      | string, Color               | #1890ff         | 否  | 活动方格光标颜色 |
| $value                | (value: string) => {}       | 输入字符改变后触发       |
| onClose               | () => {}                    | 关闭键盘后触发         |
| onKeyDown             | (key: ICaridInputKey) => {} | 按键按下后触发, 返回按键字符 |

## 开源地址
[gitee: https://gitee.com/code_yu/carid_input](https://gitee.com/code_yu/carid_input)