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

  • 同行人健康码怎么弄(同行人健康码怎么查询接种记录)

    同行人健康码怎么弄(同行人健康码怎么查询接种记录)

  • iphone通讯录不按字母排序(iphone通讯录不按首字母排序)

    iphone通讯录不按字母排序(iphone通讯录不按首字母排序)

  • excel如何快速插入多列(excel如何快速插行)

    excel如何快速插入多列(excel如何快速插行)

  • 华为手机怎么开通畅连通话(华为手机怎么开空调)

    华为手机怎么开通畅连通话(华为手机怎么开空调)

  • wps怎样替换文字(wps2019怎么替换文字)

    wps怎样替换文字(wps2019怎么替换文字)

  • 电脑上怎么下载视频(电脑上怎么下载歌曲到u盘)

    电脑上怎么下载视频(电脑上怎么下载歌曲到u盘)

  • 拼多多店铺收藏怎么没有了(拼多多店铺收藏量多有什么好处)

    拼多多店铺收藏怎么没有了(拼多多店铺收藏量多有什么好处)

  • 微信不退群又隐藏怎么设置(微信不退群又隐藏自己名字)

    微信不退群又隐藏怎么设置(微信不退群又隐藏自己名字)

  • wifi慢是什么原因(wifi 很慢)

    wifi慢是什么原因(wifi 很慢)

  • 华为手机不显示电量是怎么回事(华为手机不显示sim卡怎么办)

    华为手机不显示电量是怎么回事(华为手机不显示sim卡怎么办)

  • oneplusa5000是什么手机(oneplusa5000是什么型号中文名字)

    oneplusa5000是什么手机(oneplusa5000是什么型号中文名字)

  • 为什么拉黑以后还偶尔能打通(为什么拉黑以后又拉回,并删除)

    为什么拉黑以后还偶尔能打通(为什么拉黑以后又拉回,并删除)

  • mate20pro和mate30pro区别(mate20pro和mate30pro屏幕哪个好)

    mate20pro和mate30pro区别(mate20pro和mate30pro屏幕哪个好)

  • ledt5和t8的区别(ledt8灯管怎么接线图解)

    ledt5和t8的区别(ledt8灯管怎么接线图解)

  • 淘宝亲情号付款是什么意思(淘宝亲情号付款额度怎么设置)

    淘宝亲情号付款是什么意思(淘宝亲情号付款额度怎么设置)

  • 14寸和15.6寸实物对比(14寸和15.6寸价格一样)

    14寸和15.6寸实物对比(14寸和15.6寸价格一样)

  • 256g固态和512g固态区别(固态256和512差多少钱)

    256g固态和512g固态区别(固态256和512差多少钱)

  • 开着微信语音闹钟响吗(开着微信语音闹钟能正常的响吗苹果)

    开着微信语音闹钟响吗(开着微信语音闹钟能正常的响吗苹果)

  • 抖音为什么会限流(抖音为什么会限流作品)

    抖音为什么会限流(抖音为什么会限流作品)

  • iphone怎么分身微信(苹果怎么把微信分身用俩微信)

    iphone怎么分身微信(苹果怎么把微信分身用俩微信)

  • 手机没有电池直接充电能开机吗(手机没有电池直接插充电器怎么开不起机)

    手机没有电池直接充电能开机吗(手机没有电池直接插充电器怎么开不起机)

  • vivox27是否有nfc(vivox27手机有nfc吗)

    vivox27是否有nfc(vivox27手机有nfc吗)

  • 苹果耳机怎么下一首播放(苹果耳机怎么下找出来拉黑的耳机)

    苹果耳机怎么下一首播放(苹果耳机怎么下找出来拉黑的耳机)

  • 手机被刷机还能复原相册吗(手机被刷机还能找回来吗)

    手机被刷机还能复原相册吗(手机被刷机还能找回来吗)

  • 苹果xs面容id不可用是什么原因(苹果xs面容ID不可用)

    苹果xs面容id不可用是什么原因(苹果xs面容ID不可用)

  • 抖音黑名的人怎么移出(抖音黑名的人怎么找回来)

    抖音黑名的人怎么移出(抖音黑名的人怎么找回来)

  • 发票已经报送怎么处理
  • 期初余额有误怎么在本期做调整凭证
  • 整形医院有收费标准么
  • 建筑业收到预收款预缴增值税
  • 哪些费用类专票可以抵扣
  • 固定资产丢失
  • 应付职工薪酬工资贷方有余额要怎么调整
  • 企业所得税工资薪金支出怎么填
  • 核定征收个体户个人经营所得税
  • 专用设备抵免企业所得税目录
  • 个人投资理财需要注意什么
  • 折价收购股权会计分录
  • 增值税没有按时缴纳会影响开票吗
  • 医疗器械技术服务合同
  • 个人缴纳失业保险的比例
  • 个人借款给公司借条怎么写
  • 企业筹办期多久
  • 外籍人士离职补偿
  • 费用计入资产
  • win10误删系统软件怎么还原
  • 应收票据借贷方核算什么内容
  • 怎么进入bios设置界面设置内存
  • 收购自然人股东的股权要注意什么
  • 减税降费是针对个人还是企业
  • 华为鸿蒙harmonyos官网4.0
  • vue+element-ui项目
  • 公司的净资产总值怎么算
  • 委托代销商品的代销费用
  • 坏账损失可以做销项税转出吗
  • 贴现会不会损害所有者权益
  • 详解php字符串替换
  • 已确认的发票如何入账
  • vuecli非根目录打包
  • php socket_create
  • 企业亏损企业汇算清缴怎么处理
  • 电子承兑非拒付追索待清偿
  • 取得企业债券利息
  • 应交税费年末有余额怎么处理
  • 开收据可以列收入吗
  • 帝国cms怎么用
  • 以前年度损益调整会计分录
  • 全年一次性奖金并入或单独哪个好
  • 产品成本计算的分类法适用于( )
  • access数据库丢失原因
  • SQL2005中char nchar varchar nvarchar数据类型的区别和使用环境讲解
  • sql删除表中的某一行
  • 收据可以入账报销吗
  • 投资性房地产租金
  • 技术人员工资计入什么科目
  • 哪种发票可以报税
  • 补计提所得税怎么做分录
  • 固定资产折旧提头不提尾
  • 日后事项中所得税的处理方法
  • 应交税费属于什么科目借方
  • 模具报价成本核算方法
  • 产品质量问题有赔偿吗
  • 计提社保个人部分会计分录
  • 发票隔年还能做账吗
  • 固定资产折旧算现金流入吗
  • 隔离模块与隔离模块如何连接?
  • mysql5717安装详细过程
  • window如何还原系统
  • centos6 rpm
  • windowsxp入门
  • win10系统版本20h2
  • Win10 Mobile 10586无法更新应用怎么办 一招教你解决
  • 更改mac地址值
  • 5.2光源
  • js自动输入
  • shell脚本实现自动部署
  • 批处理显示
  • Node.js中的事件循环是什么意思
  • webuploader.create
  • saltstack安装
  • 税控盘异常什么原因
  • 烟台市独生子女费 打什么电话咨询
  • 深圳国税税发票在哪里开
  • 普通发票开具时写材料一批需要附什么清单?
  • 2021年下半年财务部工作计划
  • 发生技术入股递增怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设