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

  • 老项目增值税简易计税
  • 营改增后房地产会计账务处理
  • 印花税的征税范围具体有哪些
  • 比赛奖金要交税么
  • 工资走账是什么意思
  • 防伪税控技术维护费怎么申报
  • 全面一次性奖金收入扣税标准
  • 出差的招待费怎么报销
  • 个人所得税减除费用6万元什么意思
  • 运输企业车辆折旧一次性折旧
  • 应付票据现金流量现值计算公式
  • 个税申报截止日期2023年8月
  • 资产负债表存货为负数原因
  • 业务招待费超支原因怎么写
  • 出售房屋缴纳的印花税
  • 建筑业如何开票
  • 卖房土地增值税税率
  • 填报退税
  • 机动车发票有几联
  • 收到人民政府寄来的ems
  • 外汇局网上申报
  • 个人收回转让的股权个税应如何处理?
  • 广告公司返点是什么意思
  • 文艺汇演活动经历怎么写
  • 实际利率是r还是i
  • 为什么打开Win10虚拟器后一直在界面
  • php写json
  • php中this和self的区别
  • pcas service进程可以关闭么
  • scsiaccess.exe - scsiaccess是什么进程 有什么用
  • PHP:spl_autoload_extensions()的用法_spl函数
  • 公会经费缴费单位应于每月
  • phpipam使用
  • 如何购买增值税发票需要什么资料
  • php的oop的理解
  • 筹资活动产生的现金流量净额为正说明什么
  • nvme安装方法
  • eccv论文下载
  • php写一个简单的单例模式
  • 一般纳税人只有进项怎么报税
  • python中if语句的用法
  • sql serverjdbc
  • 购买监控器计入什么科目
  • 政府补助免征企业所得税条件会计分录
  • 征地拆迁的费用可以作为资产吗
  • sql20054n
  • 帐务处理程序
  • sql server获取字段长度
  • 混凝土增值税发票税率
  • 增值税专用发票怎么开
  • 手撕发票是
  • 广告制作需要交文化事业建设税
  • 分公司与总公司的责任承担
  • MySQL replace into 语句浅析(二)
  • mysql单表10亿
  • win7经典版怎么换回win10
  • win8defender怎么打开
  • hda linux
  • linux怎么使用ping命令
  • svhost.exe - svhost是什么进程 有什么作用
  • Win7系统重装后鼠标键盘不能用怎么办
  • 电脑word程序
  • windows8_os
  • 安卓开源部分叫什么
  • shell脚本实现文件移动、复制等操作
  • 都是惹得祸
  • lua脚本语言零基础教程
  • Unity3D中的事件处理
  • unity as
  • csgo视角指令锁定枪械摇晃
  • JQuery绑定事件的函数是
  • jQuery中text() val()和html()的区别实例详解
  • jquery field
  • android获取屏幕内容
  • 广东电子税务局官网登录入口
  • 咨询服务合同属于购销合同吗
  • 河南地税网上个税怎么交
  • 临时税务登记证是什么意思
  • 北京税务局网站官网
  • 差额开票扣除额多补税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设