小程序组件库开发之车牌号专属键盘

小程序开发过程中可能会碰到和车牌信息相关的开发，这时候就需要输入车牌号，传统的键盘输入车牌号，需要打出汉字，再选择相应的字母数字，并不是特别方便，这里笔者专门开发了车牌号键盘，可以任意选择修改省份，数字和字母。
先看示例图：

组件主要代码如下：

// components/plate-number-keyboard/plate-number-keyboard.js
Component({behaviors: [],properties: {show: { // 控制键盘显示隐藏type: Boolean,value: false},initValue: { // 初始化的值type: String,value: ""}},data: {plateNumber: "", // 键盘操作结果值provinceList: {line1: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏'],line2: ['浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼'],line3: ['川', '贵', '云', '陕', '甘', '青', '蒙', '贵', '宁', '新'],line4: ['藏', '使', '领', '警', '学', '港', '澳']},letterNumberList: {line1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],line2: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],line3: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],line4: ['Z', 'X', 'C', 'V', 'B', 'N', 'M']},showProvince: true, // 是否显示省份面板，控制省份面板和字符面板显示}, // 私有数据，可用于模板渲染lifetimes: {// 生命周期函数，可以为函数，或一个在methods段中定义的方法名attached: function() {},moved: function() {},detached: function() {},},// 生命周期函数，可以为函数，或一个在methods段中定义的方法名attached: function() {}, // 此处attached的声明会被lifetimes字段中的声明覆盖ready: function() {// 如果初始化有值，赋值，否则，置为空this.setData({plateNumber: this.data.initValue ? this.data.initValue : ''})},pageLifetimes: {// 组件所在页面的生命周期函数show: function() {},hide: function() {},resize: function() {},},methods: {/*** 键盘面板切换操作，控制省份内容和字符内容显示*/_clickChangePlane: function() {this.setData({showProvince: !this.data.showProvince})},/*** 关闭键盘，将键盘隐藏*/_closeKeyboard: function(e) {console.log(2)this.setData({show: false})},/* 触发外部绑定事件，传递结果值 */_handleResult: function() {const myEventDetail = {value: this.data.plateNumber  // 传递到结果文本};// 触发外部绑定事件，传递结果参数this.triggerEvent('getResult', myEventDetail);},/*** 键盘主要键点击事件，将点击内容更新到plateNumber*/_handleClick: function(e) {// 如果当前显示的省份面板，当即任意省份后，自动切换到字符面板，同时将结果值的第一个字符修改if (this.data.showProvince) {this.setData({showProvince: false})}let currentResult = this.data.plateNumber; // 当前的结果值let currentText = e.currentTarget.dataset.text; // 当前的操作值// 车牌号最多8位，大多数7位，新能源8位，控制不能超过8位数if (currentResult.length < 8) {this.setData({plateNumber: currentResult + currentText})this._handleResult();}},/*** 删除回退点击事件*/_handleDelete: function() {let currentText = this.data.plateNumber;currentText = currentText.substring(0, currentText.length - 1);// 当当前结果值长度大于0时，可执行删减操作if (currentText.length >= 0) {this.setData({plateNumber: currentText})this._handleResult();}},/*** 防止点击穿透*/_preventDefault: function(e) {}}})

具体的说明文档，以及详细代码见下文链接：
小程序组件：车牌号键盘
觉得还可以的给个star，有问题可以留言。

欢迎关注博主——小圣贤君，有问题可以留言哦~

小程序组件库开发之车牌号专属键盘相关推荐

微信小程序组件库开发记录
微信小程序组件库开发记录背景前言技术选型环境搭建安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片拷贝文件到另一个目录删除目录整合创 ...
小程序组件库开发之抽奖游戏组件
笔者在之前写了一篇关于小程序抽奖游戏组件的文章,当时的设计比较粗糙,组件的可复用性也不是很好,这里笔者新开发了一个抽奖小游戏组件,表现形式上和可复用性上都相对之前有了不小的提升. 读者朋友可以先看一下 ...
支付宝小程序组件库开发之手写板组件
此组件主要用于小程序内签字手写功能,可显示缩小版,全屏版两种类型,三种笔画颜色可选择,手写完成可获取手写结果. 点击"重写",会清空手写板内容: 点击"完成", ...
支付宝小程序组件库开发之省市区三级地址选择器组件
支付宝小程序开发文档中并没有提供明确的省市区选择器,不少项目还是有地址的填写需求,根据支付宝小程序现有提供的组件以及api,完全是可以实现填写地址的需求,比如分别获取省市区,通过地图来获取地址等,但是 ...
支付宝小程序组件库开发之自定义switch组件
支付宝小程序在官方文档上已经给出了switch组件,点击这里直达Switch,官方给出的示例是这样的: 结果实现出来是这样的: 卧槽,坑了,有点不爽,那就自己写一个吧,也不费多大的事,下面看效果: 这 ...
从0到一开发微信小程序（7）—小程序组件库(提高开发效率)
文章目录其他相关文章 1.组件库 1.1.TDesign 引入TDesign 使用 NPM 修改 app.json 使用组件 TDesign的应用 Rate 评分 Sticky 吸顶容器 Toast ...
小程序组件库ColorUI的使用，一键复制粘贴
在开发uniapp的时候,最佳的ui框架就是ColorUI,ColorUI是一个Css类的UI组件库!不是一个Js框架.相比于同类小程序组件库,ColorUI更注重于视觉交互! 颜值很高,注重颜值的程 ...
可定制的小程序组件库：Wux Weapp
可定制的小程序组件库:Wux Weapp 介绍 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序UI组件库.提供了超过70个实用组件,帮助开发者提高开发效率.在上线的16个月以来,我们持续 ...
如何从Vant Weapp、MinUI、iView Weapp、Wux Weapp、ColorUI共5个小程序组件库选型转载
前言发展到今天,手机端组件库其实已经大同小异,熟练的程序员甚至都能背过80%的组件名称,比如toast.cell.checkbox--,来来回回就是这么些,那么,面对市面上最火的5个小程序组件库,我 ...

小程序组件库开发之车牌号专属键盘

小程序组件库开发之车牌号专属键盘相关推荐

最新文章

热门文章