在做小程序时，做了一个关于车的项目，然后需要添加车辆信息、添加车牌号，使用车牌键盘输入，当时我把这个需求给砍了，然后在添加车辆信息时，老大看到数据库里我乱填的车牌号，又让我把他加上了o

1.效果图

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

组件代码index.wxml

view class=' carPlate ' wx : if=' { { show } } ' block wx : if=' { { type==1 } } ' view class=' WordList ' view class=' WordItem ' wx : for=' { { CityKeyWord1 } } ' wx : key=' { { ITeM } } bind tap=' HandleClick ' data-type=' 1 ' data-ITeM=' { { ITeM } } ' { { ITeM } }/view/view view view class=' ' data-ITeM=' delete ' image src=' http :/images/input-clear。 png ' class=' clearImg '/image/view/view class=' words list ' view class=' words item ' wx : for=' { { words list 3 } } ' wx : key=' { { item } } ' bind tap=' handleClick ' data-item=' { { item } } ' { { item } }/view class=' words item words confirm ' bind tap=' handleClick '确定/view /view /block/viewindex.css。carPlate { position:已固定；padd : 12 rpx 12 rpx 30 rpx左： 0；底部： 0；宽度： 100%;/*高度： 150 px*/font-size : 30 rpx；背景# fff盒子尺寸：边框盒子；边框-top: 1px纯色rgb(211，207，207)；z指数： 200；}.单词列表{ display: flex宽度： 100%;正义-内容：空格；align-items:居中；}.wordItem { margin: 5rpx宽度： 70 rpx高度： 70rpx线高： 70 rpx文本对齐：中心；border: 1px固体# eee border-radius : 10 rpx；}.word confirm { width : 130 rpxcolor : # fff背景技术# 473af0}。wordClear { width: 100rpx}。clearImg { width : 60 rpx h8 : 60 rpx垂直对齐： 中间；}index.js

组件({ properties : { type : { type : Number，default: 1，}，show: { type: Boolean，default: false，})，data: { cityKeyword1: '京沪浙苏粤鲁晋冀豫，cityKeyword2: '川渝辽吉黑皖鄂湘赣，城市关键字3: '闽陕甘宁蒙津贵云，城市关键字4: '桂琼青新藏港澳台，keyNumber: '1234567890 '，wordList1: ' QWERTYUIOP '，wordList2: ' ASDFGHJKL '，wordList3: ' ZXCVBNM '，}，方法： { handleClick(e){ let value=e . current target。数据集。项目；让type=e . CurrentTarget。数据集。类型；switch(value){ case ' confirm ' :触发事件('确认')；打破；案例'删除' :这个。triggerevent(' delete ')；打破；默认：这个。triggerevent(' change '，{ value，type })；} } }})3.父组件引入

我想实现点击输入后有上拉的效果，开始我想使用抵消来实现的，但是下班后洗衣服想了下，不太好实现，我就想到了我以前做购物车时，有用到变换，原理差不多，我就把他用上了

然后就是点击键盘外实现收起键盘，开始我想到的就是在父组件的最外层定义关闭事件，父级里面的盒子都使用捕捉方法阻止冒泡，但想下阻止冒泡好像又有点不合情理，就又把阻止冒泡给去掉了

父组件index.wxml

view class=' container ' bind tap=' handlePlateConfirm ' view class=' translateView ' style=' transform : translateY({ { translateSpace } } px)' view class=' list ' view class=' item ' view class=' label ' *车牌号码/view view class=' content box ' catch tap=' handleClick ' view class=' inputBox ' wx : if=' { }卡诺} } ' { {卡诺} }/view view class=' prompt text ' wx : else请输入车牌号/view/view/view/view/view/viewcar-plate show=' { { show plate input } } ' bind change=' handle plate change ' type=' { { input type } } ' bind confirm=' handle plate confirm ' bind delete=' handle plate delete '/父组件index.js

第({ data : { carno : }，translateSpace: 0，inputType: 1，//车牌输入类型，1简称，2数字或者字母，showPlateInput: false，}，/*用于点击弹出键盘输入，空间为键盘弹出后向上拉取的距离*/handleClick(e) { /* 150为键盘的高度*/让空格=-(e . currenttarget。offset top-150)；/* regExp用于判断当前已输入的车牌号是否是中文，并让键盘显示中文还是英文输入*/让正则表达式=/^[u4e00-u9fa5]/；让input type=1；if(regExp.test(this.data。卡诺)){ InputType=2；}这个。setdata({ translatespace :空格，showPlateInput: true，inputType }) }，/*键盘输入操作*/handleplatenchange(e){ let value=e . detail。价值；让type=e . detail。类型；让卡诺=this.data。卡诺；卡诺=值；if(type==1){ this。setdata({ inputtype : 2 }) }此。setdata({ 0卡诺})},/*点击键盘上的确定*/handlePlateConfirm(){/* isCarPlate用于判断输入的车牌号是否符合规范*/if(！this.isCarPlate(this.data。卡诺)){ wx.showToast({ title: '请输入正确的车牌号，图标：“无”，持续时间： 2000 })返回假的}这个。setdata({ translatespace : 0，showPlateInput: false，inputType: 1 }) }，/*用于键盘输入删除*/handleplate delete(e){ 0让卡诺=this.data。卡诺；卡诺=卡诺子串(0,卡诺长度-1);如果(卡诺。长度==0){ this。setdata({ inputtype : 1 }) }此。setdata({ 0卡诺，})},/*判断车牌号*/isCarPlate(值){返回/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{ 5 }[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{ 4 })|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][阿-兹][阿-HJ-NP-Z0-9]{ 4 }[阿HJ NP Z0 9挂学警港澳使领]))$/.测试（值);}})父组件index.css。集装箱{ height: 100vh背景# fff}。翻译视图{背景： # eee}.列表{边距-底部： 20 rpx背景# fff}。列表：最后一个子级{边距： } 0；}.项目{ display : flex padding : 0 26rpx宽度： 100%;高度： 116rpx盒子尺寸：边框盒子；align-items:居中；边框-底部： 1px实心# eee}。项目：最后一个孩子{边框：无；}.标签{右边距： 10 rpx宽度： 140 rpx}.content box { display : flex width : calc(100%-150 rpx)；高度： 90 rpxalign-items:居中；正义-内容：空格；}.提示文字{ color : # c7c 7；}.inputBox { width : 100%；高度： 80rpx线高： 80 rpx}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。