VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动
荫云优惠活动

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

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

1 。 渲染

1.png

0.png

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^_^)

推荐教程:《微信小程序

微信应用下载

微信是一款移动通讯软件,支持通过手机网络发送语音消息、视频、照片和文字。 微信带来了全新的移动通信体验,您可以单独或群组聊天,还可以根据您的地理位置查找附近的人。 有需要的朋友,请快来保存您的下载体验吧!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:如何使用微信小程序中的车牌号输入法(如何使用微信小程序中的车牌号输入法进行打印) https://zhujicankao.com/127758.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 如何使用微信小程序中的车牌号输入法(如何使用微信小程序中的车牌号输入法进行打印)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!