如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）

当我在开发一个小程序时，我创建了一个关于汽车的项目。 接下来，我必须添加车辆信息和车牌号，并使用车牌键盘输入它们。 当时我就放弃了这个条件。 后来在添加车辆信息时，老板看到我在数据库中随机输入了一个车牌号，让我添加^o^

1 。 渲染

2.相关代码使用组件表单实现键盘输入

组件代码index.wxml

   {{item}}   { {item}}   {{item}}  {{item}}  >{{item}}    {{item}}        {{item}} 确认  

index.css

.carPlate{ 位置：固定；填充：12rpx 12rpx 30rpx； ; 底部: 0; /* 高度: 150px; */ 字体- 大小: #fff; 框- 大小: 边框-b牛;边框-顶部：1px实心rgb（211,207,207）;z-索引：200;}.wordList{显示：flex;宽度：100％； ]; 对齐-items: center;}.wordItem{ margin: 5rpx; width: 70rpx; line-height: 70rpx; text-align: center; -半径：10rpx;}.wordconfirm{ 宽度：130rpx; 颜色：#473af0;}.wordClear{ 宽度：100rpx;}.clearImg{ 宽度：60rpx; 垂直 -align; : middle;}

index.js

组件 ( { property: { type: { type: Number, default: 1, }, show: { type: Boolean, default: false, } }, data: { cityKeyword1: '北京、上海、浙江、广东、山东、山西、河南省'',城市关键词2：'四川省、余辽治黑、安徽省、湖北省、湖南省、江西省', cityKeyword3: '福建、陕西、甘肃、宁夏、孟津、贵云', cityKeyword4: '桂琼庆、香港、澳门、台湾', keyNumber: '1234567890', wordList1: 'QWERTYUIOP', wordList2: 'ASDFGHJKL', wordList3: 'ZXCVBNM', }, method: { handleClick(e) { let value = e.currentTarget.dataset.item; let type = e.currentTarget.dataset.type; switch(value) { case 'confirm': this. '确认'); 案例 '删除': this.triggerEvent('删除'); 默认值: this.triggerEvent('change', { value, type }); span style="font -size: 14px;">3.引入父组件点击输入后的上拉效果我们想要为了实现这一点。  一开始我想用offset来实现，但是实现起来很困难，因为下班后还要洗衣服。  我在创建购物车时想到了使用transform的想法。  原理类似，所以我就用了。  接下来，单击键盘外部将其关闭。  我的第一个想法是关闭父组中的键盘文件的最外层定义结束事件。  母体内部的盒子采用catch方式，防止产生气泡。  不过阻止冒泡似乎有点不可能，所以我去掉了阻塞的方法。  父组件的index.wxml
     *车牌号  {{carNo}}  请输入您的车牌号    
父组件索引。 js
Page({ data: { car​​​​No: '', TranslationSpace: 0, inputType: 1, // 车牌输入类型，一个缩写, 两个数字或字母, showPlateInput: false, }, /* 用于点击时弹出键盘输入。空格是键盘向上拉动时的距离 */ handleClick( e) { /* 150 是键盘的高度 * / 让空间 = -(e.currentTarget.offsetTop - 150); /* regExp用于判断当前输入的车牌号是否为中文，并在键盘上显示中文或英文输入 * / let regExp = /^[\u4e00- \u9fa5]+/; 令 inputType = 1。   if(regExp.test(this.data.carNo)) { inputType = 2; } this.setData({ TranslationSpace: space, showPlateInput: true, inputType }) }, /* 键盘输入操作 */ handlePlateChange(e) { let value = e.detail.value; let type = e.detail.type; let carNo = this.data.carNo; if(type == 1) { this.    setData({ inputType: 2 }) } this.setData({ car​​​​No }) }, /* 点击键盘上的确定 */ handlePlateconfirm() { /* isCarPlate 是输入的车牌号，用于判断是否是符合规范 */ if (! this.isCarPlate(this.data.carNo)) { wx.showToast({ title: '请输入正确的车牌号' , icon: 'none', period: 2000 }) return fAlso; } this.setData({ TranslationSpace: 0, showPlateInput: false, inputType: 1 }) }, /* 用于删除键盘输入 */ handlePlateDelete(e) { let carNo = this.data.carNo; number substring(0, carNo.length - 1); if(carNo.length == 0) { this.setData({ inputType: 1 }) } this.setData({ car​​​​No, }) }, / * 判断车牌号 */ isCarPlate(value) { return /^( ([北京、天津、上海、重庆、河北、云南、辽宁、湖南、安徽、山东、新江苏、浙江、甘肃、湖北、广西,甘肃、山西、蒙古、陕西、吉林、福建、广东、青海、西藏、四川、宁琼等][A-Z]( ([0-9]{5}[ DF])|([ DF]([A-HJ-NP- Z0-9])[0-9]{4 })))|([北京、天津、上海、重庆、河北、云南、辽宁、湖南、安徽、山东、新江苏、浙江、甘肃、湖北、广西、甘肃、山西、蒙古、陕西、吉林、福建、贵州、广东、青海、西藏、四川、宁琼][A-Z ][A-HJ[ k3]NP-Z0[ k3]9]{4}[A-HJ[ k3]NP-Z0-9 请挂断香港校警大使港澳]))$/.test(value) }})
父组件index.css
.container{ 高度：100vh; 背景：#fff;}.translateView{ b背景：#eee;}.list{ margin-bottom: 20rpx; 背景：#fff;}.list:last-child{ margin: 0;}.item{ 显示：flex 宽度； ：100%；高度：116rpx；框-大小：边框-框；-对齐项目：中心；边框-底部：1px实体#eee;}.item：last-子{边框: 无;}.label{ margin-right: 10rpx; width: 140rpx;}.contentBox{ display: flex; width: calc(100% - 150rpx); 对齐项目：center; ; justify-内容：空格-;}.promptText{ 颜色：#c7c7c7;}.inputBox{ 宽度：100%; 行-高度：80rpx;} 
我正在努力学习。  如果对您学习有帮助，请点赞（Like^_^）
推荐教程：《微信小程序》