位置: IT常识 - 正文

【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能(uniqpp)

编辑:rootadmin
【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能 目录(一)效果图(二)使用组件说明keyboard属性:keyboard事件:(五)js代码实现(一)效果图

推荐整理分享【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能(uniqpp),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uni'app,uniapp官方网站,uni-app navigateto,uni'app,uniqpp,uni-app navigateto,uniqpp,uni'app,内容如对您有帮助,希望把文章链接给更多的朋友!

(二)使用组件说明

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

<u-keyboard closeOnClickOverlay :focus="true" ref="uKeyboard" :tooltip="false" :random="true" mode="number" :dotDisabled="true" :show="popupShowPay" @change="onChange" @backspace="onBackspace" @close="popupShowPay = false" > <view class="qinshuru">请输入支付密码</view> <u-code-input v-model="payPassword" :maxlength="6" dot size="80"></u-code-input> </u-keyboard>keyboard属性:

通过mode参数定义键盘的类型,v-model绑定一个值为布尔值的变量,我绑定的是showKeyboard变量,控制键盘的弹出与收起; mode = number (默认值)为数字键盘,此时顶部工具条中间的提示文字为"数字键盘" mode = car 为汽车键盘,此时顶部工具条中间的提示文字为"车牌号键盘" mode = card 为身份证键盘,此时顶部工具条中间的提示文字为"身份证键盘"

【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能(uniqpp)

通过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 = false this.popupShowPay = false this.getProductDetail() }, confirmUpDown() { this.popupShowPay = true this.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() },
本文链接地址:https://www.jiuchutong.com/zhishi/278088.html 转载请保留说明!

上一篇:postgres.exe是什么进程 postgres进程查询

下一篇:Linux中安装使用semanage来修改文本的教程(linux安装方式)

  • 企查查企业信息查询怎么查询个人名下公司

    企查查企业信息查询怎么查询个人名下公司

  • 微信已撤回消息怎么看(微信已撤回消息恢复器安卓)

    微信已撤回消息怎么看(微信已撤回消息恢复器安卓)

  • 蚂蚁宝如何关闭自动扣费(蚂蚁宝如何关闭自动扣费功能)

    蚂蚁宝如何关闭自动扣费(蚂蚁宝如何关闭自动扣费功能)

  • win10实时保护怎么永久关闭(win10实时保护怎么关闭需要管理员)

    win10实时保护怎么永久关闭(win10实时保护怎么关闭需要管理员)

  • 大鱼卡淘宝版免流范围(大鱼卡淘宝版免流应用有哪些)

    大鱼卡淘宝版免流范围(大鱼卡淘宝版免流应用有哪些)

  • iphone7蓝牙图标不见了(苹果7p手机打开蓝牙上面不显示)

    iphone7蓝牙图标不见了(苹果7p手机打开蓝牙上面不显示)

  • 智能手机采用什么功能进行移动支付(智能手机采用什么信号)

    智能手机采用什么功能进行移动支付(智能手机采用什么信号)

  • 微信违规是怎么回事(微信违规是怎么办)

    微信违规是怎么回事(微信违规是怎么办)

  • excel一列数字怎么求和(excel一列数字怎么修改其中一个)

    excel一列数字怎么求和(excel一列数字怎么修改其中一个)

  • 云空间已满有什么影响(云空间已满该怎么办)

    云空间已满有什么影响(云空间已满该怎么办)

  • 携程账号忘记了怎么查(携程账号密码忘了怎么找回)

    携程账号忘记了怎么查(携程账号密码忘了怎么找回)

  • 苹果11promax升级一直在转圈(苹果11promax升级16.5)

    苹果11promax升级一直在转圈(苹果11promax升级16.5)

  • 微信中引用是指什么意思(微信引用啥意思)

    微信中引用是指什么意思(微信引用啥意思)

  • 群红包最多发多少金额(群红包最多一次能发多少钱?)

    群红包最多发多少金额(群红包最多一次能发多少钱?)

  • 微信被删了发消息对方能看到吗(微信被删了发消息对方还能看见吗)

    微信被删了发消息对方能看到吗(微信被删了发消息对方还能看见吗)

  • 麦克风启用不成功(麦克风启用不成功怎么设置)

    麦克风启用不成功(麦克风启用不成功怎么设置)

  • 物联网概念什么时候提出的(物联网概念什么时间提出)

    物联网概念什么时候提出的(物联网概念什么时间提出)

  • 怎样使用微信(怎样使用微信零钱支付)

    怎样使用微信(怎样使用微信零钱支付)

  • 设备sn号是什么(嘀嘀虎设备sn号是什么)

    设备sn号是什么(嘀嘀虎设备sn号是什么)

  • 怎样解除手机亲情号码(怎样解除手机亲情号)

    怎样解除手机亲情号码(怎样解除手机亲情号)

  • 坦白说怎么解锁线索(坦白说在哪找到)

    坦白说怎么解锁线索(坦白说在哪找到)

  • vivoy81全屏怎么返回(vivoy83怎么设置全屏)

    vivoy81全屏怎么返回(vivoy83怎么设置全屏)

  • 手机进水扬声器没声音(手机进水扬声器有杂音)

    手机进水扬声器没声音(手机进水扬声器有杂音)

  • 【计算机网络】Web服务器的配置(计算机网络拓扑结构有哪些)

    【计算机网络】Web服务器的配置(计算机网络拓扑结构有哪些)

  • 如何使用php中codeIgniter框架?(phpipam使用)

    如何使用php中codeIgniter框架?(phpipam使用)

  • python中input输入为数字(Python中input输入多行文本)

    python中input输入为数字(Python中input输入多行文本)

  • 吸收合并需要编制报表吗
  • 建筑劳务公司工人工资计入什么科目
  • 代征增值税业务的账务处理
  • 普票千元版和万元版板面区别
  • 小规模印花税是季报还是月报
  • 所得税费用增加利润减少
  • 工会费缴纳基数
  • 发票勾选平台怎么导出未勾选的发票
  • 企业所得税计提分录
  • 专用发票抵扣联丢失还能抵扣吗
  • 往来账审计存在问题及建议
  • 房地产怎么计算需要交多少税
  • 存货清查的结果
  • 装修期内免租金可以办理营业执照吗
  • 财务报表里现金是什么
  • 从公司账户转给个人账户取出来发给员工做过节费
  • 合同没签定金可以退的吗
  • 购进免税农产品怎么计算进项税额
  • 进项税已认证未入账如何处理
  • 合同副本和正本区别
  • 盈余公积可以随便用吗
  • 年会奖金多少合适
  • 水利建设基金怎么计提
  • 印花税资金账簿税率是多少
  • 增值税为什么申报不了
  • 有一个公司能做多少事情
  • 工资薪金个税税率表
  • 营运资金投资额计算公式
  • 高速公路过路费税率是多少
  • 申请双软企业会查员工学历吗
  • 完成产值怎么算
  • 旅行社差额征税税率5%
  • 母公司是否应替子公司承担违约责任
  • php中file
  • 深入解析Laravel5.5中的包自动发现Package Auto Discovery
  • 固定资产清理的审计目标不包括
  • php做登录界面连接数据库
  • 即征即退进项税额分摊方法
  • java+php
  • jsp课程设计含源代码
  • 电赛例题
  • bad block bitmap checksum
  • node_sass
  • 什么是技术服务工程师
  • 免税农产品包括30万元吗
  • python中input转换
  • mysql profiles
  • 如果没有抄税就申报了
  • 社保可以补交吗
  • 长期股权投资的核算方法
  • shell取命令执行结果
  • 营业额的纳税比例是多少
  • 预付卡销售和充值可以报销吗
  • 对方多开发票怎么处理?
  • 普票冲红需要收回原来的发票吗
  • 小微企业要记账吗
  • 公司食堂招待客户,客户付了钱怎么入账
  • 废品损失如何处理
  • mysql根据时间查询最新一条数据
  • SQL 导入导出Excel数据的语句
  • xp系统强制删除文件
  • 映泰主板bios设置内存频率
  • 忘记mysql密码
  • win7旗舰版系统怎么样
  • win7如何设置休眠不断网
  • msng.exe是什么
  • win7更改磁盘分区
  • perl do
  • node+express+ejs制作简单页面上手指南
  • 利用用英文怎么翻译
  • 批处理自动确定
  • 批处理文件实例
  • python整理表格不用入门
  • unity strangeioc
  • web docs
  • 年收入12w
  • 福建省国税局电话号码
  • 增值税税负偏低的风险点
  • 安徽省政府非税收入专用收据查询
  • 广州哪里有餐饮费发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设