【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能
创始人
2024-04-22 04:22:14
0

目录

    • (一)效果图
    • (二)使用组件说明
    • keyboard属性:
    • keyboard事件:
    • (五)js代码实现

(一)效果图

在这里插入图片描述

(二)使用组件说明

组件使用的是uview组件,Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。

 请输入支付密码

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: ''//输入的密码}},

事件:
按钮点击显示:

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()},

相关内容

热门资讯

AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
AWR报告解读 WORKLOAD REPOSITORY PDB report (PDB snapshots) AW...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限,您可以使用AWS Identity and Access Ma...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
Azure构建流程(Power... 这可能是由于配置错误导致的问题。请检查构建流程任务中的“发布构建制品”步骤,确保正确配置了“Arti...
群晖外网访问终极解决方法:IP... 写在前面的话 受够了群晖的quickconnet的小水管了,急需一个新的解决方法&#x...
AWSECS:哪种网络模式具有... 使用AWS ECS中的awsvpc网络模式来获得最佳性能。awsvpc网络模式允许ECS任务直接在V...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...