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

  • 公司车船使用税会计分录
  • 金税四期影响企业贷款吗
  • 个人提供劳务报酬需要到税务局开发票吗?
  • 哪些增值税专用发票可以抵扣进项税
  • 被客户扣钱怎么办
  • 中兴通抵扣官网
  • 有什么法规依据法律规定
  • 防伪税控系统服务费发票在哪里开
  • 房地产企业预缴增值税如何申报
  • 长期待摊费用税前扣除
  • 出纳需要填哪些表
  • 工程领用物资退回会计分录怎么写?
  • 企业非正常
  • 印花税少于1元怎么处理
  • 公司为员工需要承担哪些责任
  • 4月份到期包括4月吗
  • 发票过期作废不了怎么办
  • 列入工资的补贴是什么
  • 应付质保金到期怎么办
  • 税收法定原则的意义
  • 电子发票怎么开具流程
  • 建安企业增值税税率是多少
  • 个税专项扣除有几项
  • 公司财产损失会不会必然导致股权损失
  • 键盘插上电脑却不能用
  • macbookair重制系统
  • win10系统怎么设置锁屏壁纸
  • 主营业务成本和库存商品区别
  • 小规模餐饮企业增值税申报表填写
  • win10 批量安装软件
  • Program Files(x86)是什么意思
  • uniapp 嵌套webview
  • 金融资产终止确认是什么意思
  • 破产企业有清算费用吗
  • vue调用后端接口的方法
  • 工程施工余额在哪方
  • php上传图片到数据库完整代码
  • 全网最详细的李白解说来了
  • zgrep命令详解
  • 个税计税周期 一年
  • 实收资本确认时间什么入账
  • 转让不动产为什么能差额
  • 预收账款开票了怎么做账报税
  • 通行费电子发票的发票代码为多少位
  • 企业罚钱合理吗
  • 一行的代码
  • MySQL读写分离企业方案
  • 个税手续费发给财务人员 文件
  • 家具工厂生产
  • 小微企业减免的增值税账务处理
  • 投资收益属于营业外收入吗为什么
  • 税务师报名条件和要求
  • 应付票据在资产负债表怎么填列
  • 支付给职工以及为职工支付的现金增加
  • win2008安装sql2005
  • MySQL中interactive_timeout和wait_timeout的区别
  • ubuntu功能
  • windows2008教程
  • win8wifi受限
  • nhaspx.exe是什么
  • 登录远程linux系统可以用的方法
  • linux codec
  • win7一开机就弹窗
  • win7息屏不断网
  • Android ViewStub 布局延迟加载
  • 打地鼠android
  • cocos游戏开发教程
  • using kernel
  • 浏览器css3兼容
  • unity连接数据库能做什么
  • angular.min.js
  • jquery中给指定元素添加样式
  • js画矩形
  • AssetBundle.Unload(false)的作用
  • javascript获取浏览器代理设置
  • javascript教学视频
  • javascript面向对象精要
  • 开出去的专用发票存根怎么处理的
  • 济南税务开票软件是什么
  • 贵州地方税务局网上办税服务厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设