# bugking7-carkeyboard

**Repository Path**: bugking7_uniapp_plug/bugking7-carkeyboard

## Basic Information

- **Project Name**: bugking7-carkeyboard
- **Description**: uniapp前端组件，自定义车牌输入组件
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-08
- **Last Updated**: 2022-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 自定义车牌输入键盘--车牌键盘

## 简介

本组件根据[自定义万能键盘（数字键盘、身份证键盘、带小数点数字键盘、车牌键盘）](https://ext.dcloud.net.cn/plugin?id=6071)升级而来，老组件代码有点看不懂了，哈哈哈哈。另外数字键盘、身份证键盘、小数点数字键盘`uniapp`原生组件`input`都已提供。

同时本组件也解决了老组件的一些问题：<!--感谢铁子们对老组件的支持-->

1. 湖北简称写错的问题。

2. 车牌输入限制过多的问题，本组件对输入基本无限制。

3. 新增组件close事件回调。

4. 解决部分属性`is not defined`的问题。

5. 解决省份和字母样式混乱问题。



自定义车牌输入键盘组件，该组件目前支持两种使用方式：

### 1、配合自定义车盘输入键盘--车牌输入框组件使用

自定义车牌输入键盘--车牌输入框组件：[了解详情](https://ext.dcloud.net.cn/plugin?name=bugking7-carinput)

### 2、配合`uniapp`原生组件`input`使用

配合`uniapp`原生组件`input`为例，`input`组件须实现`@focus`、`@blur`两个事件回调，前者为了弹出车牌键盘，后者为了获取`input`输入位置光标，因此两个事件缺一不可。

只测试了`H5`，因此`input`隐藏软键盘暂未实现，下个版本会实现隐藏软键盘功能。

***注：本组件需配合`uniapp`拓展组件`uni-popup`使用。***



## 属性列表

| 使用方式                                                     | 属性名                 | 类型      | 默认值  | 必填 | 说明                                             |
| ------------------------------------------------------------ | ---------------------- | --------- | ------- | ---- | ------------------------------------------------ |
| 配合**[自定义车牌输入键盘--车牌输入框组件（`bugking7-carinput`）](https://ext.dcloud.net.cn/plugin?name=bugking7-carinput)**使用 | `cursorIndex`          | `Number`  | -1      | 是   | `bugking7-carinput`组件当前点击输入框的下标。    |
| 配合**`uniapp`原生`input`组件**使用                          | `customCarInput`       | `Boolean` | `false` | 是   | 是否使用`input`组件。                            |
|                                                              | `customCarInputCursor` | `Number`  | -1      | 是   | `input`光标。当`customCarInput`为`true`时生效。  |
|                                                              | `defaultValue`         | `String`  | 空      | 是   | `input`默认值。车牌输入键盘点击时反显回`input`。 |



## 事件列表

| 使用方式                                                     | 事件名               | 说明                                                         |
| ------------------------------------------------------------ | -------------------- | ------------------------------------------------------------ |
| 配合**[自定义车牌输入键盘--车牌输入框组件（`bugking7-carinput`）](https://ext.dcloud.net.cn/plugin?name=bugking7-carinput)**使用 | `@carKeyboardClick`  | 车牌输入键盘省份、数字、字母按键点击事件。返回值`event:{value:carNumberValue}`，车牌号码：`event.value` |
|                                                              | `@carKeyboardFinish` | 车牌输入键盘【完成】按钮点击事件。返回值`event:{value:carNumberValue}`，车牌号码：`event.value` |
| 配合**`uniapp`原生`input`组件**使用                          | 同上                 | 同上                                                         |
| 无论哪种使用方式，都需实现本事件。`uni-popup`事件回调，点击蒙层关闭`popup`。 | @maskClick           | 点击蒙层关闭`uni-popup`。获取当前车牌内容：1、使用`bugking7-carinput`获取方式，`this.$refs.carinput.carInputArr.toString().replaceAll('*', '').replace('+', ',').replaceAll(',','')`；2、使用`input`获取方式，`this.$refs.carKeyboard.carNumberValue`； |



## 基本用法

```js
<view class="container">
    	//bugking7-carinput组件使用方式
		<bugking7-carinput ref="carinput"
		@carInputClick="handleInputClick" 
		@carInputFinish="handleKeyboardFinish" 
		:defaultCarValue="carValue" 
		:canChangeProvice="true" 
		:autoNewCar="false"
		:openLongDeleteAll="false"
		></bugking7-carinput>

		<uni-popup ref="popup" 
			is-mask-click 
			mask-background-color="rgba(0,0,0,0)" 
			@maskClick="handleMaskClick">
                
			<bugking7-carkeyboard  :cursorIndex="cursorIndex"></bugking7-carkeyboard>

		</uni-popup>

		//---------------------------------------------------------------------------

		//uniapp原生组件input使用方式
		<input ref="carInput" class="input_wrap" 
			@focus="handleTextFocus" 
			@blur="handleTextBlur"
			:value="carValue"></input>

		<uni-popup ref="popup" 
			is-mask-click 
			mask-background-color="rgba(0,0,0,0)" 
			@maskClick="handleMaskClick">
			<bugking7-carkeyboard ref="carKeyboard" 
            	:defaultValue="carValue" 
            	:customCarInput="true"
				:customCarInputCursor="customCarInputIndex" 
				@carKeyboardClick="handleCarClick"
				@carKeyboardFinish="handleKeyboardFinish"></bugking7-carkeyboard>
		</uni-popup>
		
	</view>

data() {
	return {
		carValue: '',
		cursorIndex: -1,//bugking7-carinput使用
        customCarInputIndex: -1//input使用
	}
},
onLoad() {
	this.carValue="京"
},
methods: {
	handleInputClick(e) {//车牌输入框点击事件 bugking7-carinput使用
		this.cursorIndex = e.value
		this.$refs.popup.open('bottom')//uni-popup显示位置
	},
	handleKeyboardFinish(e) {//车牌键盘完成点击事件 通用事件
		console.log(e)
		this.$refs.popup.close()
	},
	handleMaskClick(){   //popup隐藏事件回调，获取车牌输入框车牌内容,通用事件
    	//bugking7-carinput获取车牌内容
		console.log(this.$refs.carinput.carInputArr.toString().replaceAll('*','').replace('+',',).replaceAll(',',''))
    	
        //input获取车牌内容
		console.log(this.$refs.carKeyboard.carNumberValue)      
	},
    handleCarClick(e) {//input 使用 车牌输入键盘按键点击事件
		this.carValue = e.value
	},
    handleTextFocus(e) { //input 使用 input获取焦点事件
		this.carValue = e.detail.value
		this.$refs.popup.open('bottom')
	},
    handleTextBlur(e) {//input 使用 input失去焦点事件
		this.customCarInputIndex = e.detail.cursor
	}
}
```

## 兼容性

只测试了`H5`，其他未测，请谨慎使用。

## 其他

#### 一、存在的问题

##### 1、为什么无法连续删除？

这确实是一个问题，因无法揣摩用户的下一步动作，故无法擅自更改当前输入框下标。因此暂未开发连续删除功能，如果你有好的解决方法，烦请告知，3Q！

##### 2、两次点击车牌输入框（bugking7-carinput）组件，车牌输入键盘会消失？

最开始没打算使用`uni-popup`组件，而是使用自定义`dialog`的方式来实现，琢磨许久发现无法实现点击`dialog`外部区域隐藏`dialog`功能。而这个功能`uni-popup`却可以轻易的实现，看过源码，老实说，没看懂，谅解哈！

使用`uni-popup`确实很方便，但随之而来就又出现另一个问题。因使用`is-mask-click`属性，点击蒙层关闭`uni-popup`，`uni-popup`关闭了，车牌输入键盘也就跟着关闭了。

如果不打算实现车牌输入键盘点击蒙层关闭效果，也很简单，关闭`uni-popup`的该功能，即`is-mask-click=“false”`。同样车牌输入框（`bugking7-carinput`）组件实现了车牌输入键盘上“完成”按钮点击事件回调，可在此回调关闭`uni-popup`，当然了这样用户体验不是很好。

综上所述，暂时还未找到一个完美的解决办法，如果你有好的解决方法，烦请告知，3Q！

##### 3、为什么车牌输入键盘中的字母“I”一直是 不可点击状态？

这个只能说不清楚。哈哈哈，车牌输入键盘组件完全是按照交管12123App中车牌录入键盘样式开发的，至于这个”I“什么时候可点击，暂时没试出来。

对车牌不是很了解，因此车牌输入键盘按键可能存在很多问题，敬请谅解。如果你知道关于车牌的更多信息，烦请告知，3Q！

## 联系方式

`QQ：945942463`