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

  • 出口退税哪些资料要留底
  • 房产税从价计征如何算
  • 国债利息收入计入财务费用吗
  • 食堂费用没有发票可以税前扣除吗
  • 增值税勾选统计后怎么申报
  • 下列各项中免征增值税的有
  • 2个公司的法人是谁
  • 无票收入是否要交税
  • 注册资金印花税减半政策
  • 什么情况下做暂估
  • 利息收入可以作为业务招待费的基数吗
  • 公司比赛规则
  • 政府拨入企业的资金怎么入账
  • 营改增施工企业哪些能退
  • 减免所得税额和抵免所得税额的区别
  • 关于工资薪金的情况说明
  • 企业生产总值怎么算出来的
  • 有限合伙企业需要承担无限连带责任吗
  • 小规模纳税人是公司还是个人
  • 审计报告格式与范文怎么写?
  • 未缴少缴税款追征期
  • 商业承兑汇票需要银行审核吗
  • 工商年报人数是12月人数吗
  • 已经上传的红字怎么修改
  • macos的复制粘贴快捷键
  • 收到发票未抵扣谁开红字
  • 旅游费用账务处理
  • 送给经销商的祝福语
  • mac10.10.5系统
  • php提高性能
  • 短缺材料赔偿会计分录
  • 所得税 季报
  • 定期定额户个人经营所得
  • vue created mounted
  • 浅谈一下新冠的好处
  • vue从入门到精通教程
  • php显示图片代码
  • ldd命令详解
  • 2022年最新公务接待标准
  • 固定资产原值怎么确定
  • 公司年产值怎么计算
  • 加工企业的税怎么算
  • 企业赠送客户礼品涉税
  • 企业报废车辆如何做账
  • 普票加专票超过45万怎么交税
  • mdf和ndf文件
  • SQL中Exists的用法
  • 小企业期间费用包括
  • 增值税申报表是含税还是不含税
  • 消费税是怎样征收的
  • 来料加工的账务处理新收入准则
  • 退还多余的预收款项的会计分录
  • 应收账款平账怎么处理
  • 验资账户需要对账吗
  • 税控盘减免税款会计分录一般纳税人
  • 农产品加计扣除1%怎么计算和会计分录
  • 包装物属于周转材料还是低值易耗品
  • 应收及预付款项的坏账损失应当于实际发生时计入
  • 开发成本贷方负数表示什么
  • 企业采用公允价值进行会计核算,所体现的会计质量要求
  • 会计各种凭证的填写示例
  • linux rpm文件怎么安装
  • win7系统怎么查看
  • Centos 5.5 php5.1.2升级到php5.2.6的方法
  • OS X Yosemite系统怎么样 OS X Yosemite功能介绍
  • windows8.1开机
  • xp系统咋样
  • win7桌面点不了怎么回事
  • win7系统怎样
  • jquery prompt
  • nodejs函数返回值
  • ActivityManagerService (二)
  • python字号
  • 简述使用jquery实现表单验证的流程
  • 江苏省税务局电子发票
  • 个人所得税完税证明网上打印
  • 国家税务总局河北地税局
  • 小船载重多少
  • 什么是财务舞弊行为
  • 企业演讲稿 英文
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设