【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能
目录
（一）效果图（二）使用组件说明keyboard属性：keyboard事件：（五）js代码实现（一）效果图
（二）使用组件说明
组件使用的是uview组件，Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。
<u-keyboardcloseOnClickOverlay:focus="true"ref="uKeyboard":tooltip="false":random="true"mode="number":dotDisabled="true":show="popupShowPay"@change="onChange"@backspace="onBackspace"@close="popupShowPay = false"><viewclass="qinshuru">请输入支付密码</view><u-code-inputv-model="payPassword":maxlength="6"dotsize="80"></u-code-input></u-keyboard>keyboard属性：
通过mode参数定义键盘的类型，v-model绑定一个值为布尔值的变量，我绑定的是showKeyboard变量，控制键盘的弹出与收起；mode = number (默认值)为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"mode = car 为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"mode = card 为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"
通过tooltip参数配置是否显示显示顶部的工具条，默认为true通过tips参数修改工具条中间的提示文字通过show-tips可以控制是否显示工具条中间的文字通过cancelBtn参数配置是否显示工具条左边的"取消"按钮通过confirmBtn参数配置是否显示工具条右边的"完成"按钮
通过dot-enabled(默认为true)参数配置，设置是否显示键盘的点(“.”)按键，只在"mode = number"时生效，因为车牌号和身份证键盘，用不到"."这个按键
设置default 属性，内容将会显示键盘的工具条上面，可以结合MessageInput 验证码输入组件实现类似支付宝输入密码时，上方显示输入内容的功能，也就是放在u-keyboard标签内的view和u-message-input标签
keyboard事件：
输入值是通过组件的change事件实现的，组件内部每个按键被点击的时候，组件就会发出一个change事件，回调参数为点击的按键的值。
通过backspace事件监听键盘退格键的点击，通过修改父组件的值实现退格的效果，见下方示例注意：点击退格键(也即删除键)不会触发change事件
（五）js代码实现
数据：
data(){return{popupShowPay:false,payPassword://输入的密码}},事件：按钮点击显示：
asyncsave(){constparams={price:this.price,blindBoxId:this.blindboxId,payPassword:this.payPassword,}constres=awaitthis.$http.sales.upBlindbox(params)this.$refs.upDialogRef.isShowDialog=falsethis.popupShowPay=falsethis.getProductDetail()},confirmUpDown(){this.popupShowPay=truethis.payPassword=this.$refs.upDialogRef.isShowDialog=false// return},onBackspace(e){if(this.payPassword.length>0){this.payPassword=this.payPassword.substring(0,this.payPassword.length-1)}},onChange(val){if(this.payPassword.length<6){this.payPassword+=val}if(this.payPassword.length>=6){this.finish()//封装的结束函数，后续还有请求接口和判断}},finish(){this.showKeyboard=false//可以放请求的接口及付款后的判断等this.save()},
