位置: 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安装方式)

  • 个税待报解预算收入怎么使用
  • 一般纳税人优惠政策最新2022标准
  • 增值税发票选择确认平台是什么?
  • 增值税零税率是一种税收优惠政策
  • 电子承兑转出后银行有凭证吗
  • 一般纳税人销售使用过的固定资产
  • 已收货款没发货怎么退款
  • 销售是销项税还是进项税
  • 租办公室还要交什么税
  • 福利性收入属于什么分配
  • 财产损失怎么办
  • 取得成本发票
  • 资产减值损失管理措施
  • 应付票据保证金的会计分录怎么写
  • 兼营免税减税项目
  • 税收分类编码如何填写
  • 电子钥匙的发票怎么开
  • 企业以现金形式支付货款
  • 哪些情况下需要更换轮胎
  • 企业资产损失会计处理
  • 工资不在本单位拿取的能加入会员吗
  • 支票能够拿来付款吗
  • 怎么判断分红前已提取足够法定公积金?
  • 代收污水处理费要交税吗
  • 个人所得税分月明细申报表
  • 测试账户收入怎么做
  • 应收账款重组
  • win10系统共享打印机报错0x0000011b解决办法
  • 基建项目类型填什么
  • windows11不显示桌面
  • 主板故障开机断电
  • 大型机械拆装
  • 冲未开票收入怎么做分录
  • 什么叫存量房转移登记
  • php 设计模式 鸟哥
  • dcc是什么文件
  • 房屋租赁经营要交哪些税
  • Stable Diffusion 准确绘制人物动作及手脚细节(需ControlNet扩展)
  • PHP:imagedashedline()的用法_GD库图像处理函数
  • 排灯节起源
  • 固定资产生产经营期间正常报废产生的净收益
  • 如何用php制作网页
  • 进项税额转出和不抵扣的区别
  • 发票多开了 财务怎么算税点
  • 出口销售折扣怎么处理
  • c 语言 static
  • mysql常见报错
  • 小规模纳税人企业所得税优惠政策最新2023
  • 退休职工费用可以税前扣除吗
  • 申报企业所得税会计分录怎么写
  • 个税专项附加扣除标准调整
  • 采购固定资产怎么做账
  • 其他应付现金流量表
  • 开出商业承兑汇票怎么做分录
  • 其他债权投资计提损失准备会引起资产总额增加吗
  • mysql in如何优化
  • mysql tmp_table_size优化之设置多大合适
  • window所有程序在哪里
  • windows service 2003
  • win8系统如何关闭杀毒系统
  • linux中安装telnet
  • 用win7的人多吗
  • xp主题怎么改成win7
  • centos最小化安装配置网络
  • wrme.exe是什么
  • win8打开蓝牙设置
  • w10系统音量图标不能用了
  • opengl教程48讲
  • Android中的数据存储方式有五种,分别是
  • Unity3D游戏开发(第2版)pdf
  • [置顶]公主大人接下来是拷问时间31
  • js jquery区别
  • javascript产生随机整数随机性强
  • android设计模式单例有几种
  • linux显示中文
  • 企业所得税问题的研究论文
  • 江苏省财务官网
  • 地税局公务员工资多少
  • 买二手房土地证怎么过户
  • 新企业会计准则长期待摊费用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设