组件使用的是uview组件,Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。
请输入支付密码
通过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标签
输入值是通过组件的change事件实现的,组件内部每个按键被点击的时候,组件就会发出一个change事件,回调参数为点击的按键的值。
通过backspace事件监听键盘退格键的点击,通过修改父组件的值实现退格的效果,见下方示例
注意:点击退格键(也即删除键)不会触发change事件
数据:
data() {return {popupShowPay: false,payPassword: ''//输入的密码}},
事件:
按钮点击显示:
async save() {const params = {price: this.price,blindBoxId: this.blindboxId,payPassword: this.payPassword,}const res = await this.$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()},
上一篇:MySQL错误码大全
下一篇:如何排查CPU 100%的应用