【uniapp前端组件】自定义车牌键盘
自定义车牌输入键盘–车牌键盘
简介
本组件根据自定义万能键盘（数字键盘、身份证键盘、带小数点数字键盘、车牌键盘）升级而来，老组件代码有点看不懂了，哈哈哈哈。另外数字键盘、身份证键盘、小数点数字键盘uniapp原生组件input都已提供。
同时本组件也解决了老组件的一些问题：
湖北简称写错的问题。
车牌输入限制过多的问题，本组件对输入基本无限制。
新增组件close事件回调。
解决部分属性
is not defined的问题。解决省份和字母样式混乱问题。
自定义车牌输入键盘组件，该组件目前支持两种使用方式：
1、配合自定义车盘输入键盘–车牌输入框组件使用
自定义车牌输入键盘–车牌输入框组件：了解详情
2、配合uniapp原生组件input使用
配合uniapp原生组件input为例，input组件须实现@focus、@blur两个事件回调，前者为了弹出车牌键盘，后者为了获取input输入位置光标，因此两个事件缺一不可。
只测试了H5，因此input隐藏软键盘暂未实现，下个版本会实现隐藏软键盘功能。
注：本组件需配合uniapp拓展组件uni-popup使用。
属性列表
| 使用方式 | 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|---|
配合**自定义车牌输入键盘–车牌输入框组件（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）**使用
|
@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；
|
基本用法
<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.valuethis.$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.valuethis.$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
【uniapp前端组件】自定义车牌键盘相关推荐
- android 自定义车牌键盘（kotlin）
android 自定义车牌键盘(kotlin) 前言 示例图 实现需求 定义键盘文件 核心代码 视频效果 汉字转化 项目链接 前言 平时停车缴费都要填车牌号码,就想着自己能不能也做个车牌键盘demo. ...
- uniapp uni-icons组件自定义图标
文章目录 1️⃣ uni-icons组件 1.1 引用位置 1.2 FontEditor简介 1.2 FontEditor使用 优质资源分享 uni-app 是一个使用 Vue.js (opens n ...
- 【uniapp前端组件】仿微信通讯录列表组件
仿微信通讯录列表组件 示例图 前言 仿微信通讯录列表组件,可实现通讯列表以及选择多个联系人功能. 组件介绍 本组件有三个自定义组件构成,都已经集成在bugking7-contact-list中,该组件 ...
- 【uniapp前端组件】宫格
宫格 简介 宫格组件. 效果图 属性 属性 类型 必填 备注 column Number 是 每行显示个数,默认为3 itemSpace Number 是 每个宫格之间的间距,默认为2,注:单位为百分 ...
- 【uniapp前端组件】仿美团外卖商品列表
仿美团外卖商品列表 简易实现美团外卖商品列表,没什么技术难点,简单来说就是两个scroll-view协作,并且两个scroll-view不会滑动冲突. 实际效果 仿美团外卖商品列表实际项目效果 简介 ...
- 前端 vue 自定义导航栏组件高度及返回箭头 自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头 自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
- vue封装自定义数字键盘组件
最近在公司做一个项目,简单来说就是web端微信公众号上的一个申请表单页面,随便如个图 环境: vue框架 + vant组件库 + 其它(这里用不上的,不说) 具体如图: 都知道,input输入框如果不 ...
- 前端组件库自定义主题切换探索-03-webpack-theme-color-replacer webpack 同时替换多个颜色改造
接上一篇<前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-02> 这篇我们来开始改造,让这个插件最终能达到我 ...
- 前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-02
接上一篇:<前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-01> 上一篇说到,在Handler.js的th ...
最新文章
- 中科院自动化所17篇CVPR 2022 论文新作速览！
- 手机可以阅读html吗,手机文档html能删除吗
- AI领域首个iF用户体验大奖——第四范式斩获2项德国iF设计奖
- uibmodal模态框打开另一个模态框_进阶版神笔：只需一句话、一个故事，即可生成画面...
- Python学习之路--装饰器
- 『设计模式』 又谈麦当劳的食品--组合模式(Composite)
- 台式机电脑配置单_2020年电脑配置单重点硬件参考
- 重载(Overload)和重写(Overide)
- ApacheCN/iBooker 未来计划 2019.11
- 《恋上数据结构第1季》单向链表、双向链表
- MIPI - DVP
- python函数和代码复用思维导图_Python语言程序---代码复用与函数递归（二）
- TCP 理论概述与 Java 编码入门
- VS+QT快速入门教程
- 中国移动CMPP接口
- 矢量文字符号文件格式设计
- [教你传话,表白,写信]
- 迁移过程中出现报错：无法解析的成员访问表达式[USERENV]
- mysql中辅导方式选择_MYSQL中如何选择合适的数据类型
- ALM系统介绍(三)