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

  • 个人去税务局开劳务费怎么交税
  • 财务管理税后利息率计算公式
  • 缴纳工会经费会计处理
  • 内部伙食费购买会计分录
  • 保险经纪公司要取得什么证
  • 核定征收企业注销后安全吗
  • 承兑汇票丢了如何追回
  • 商品周转天数和周转率
  • 其他综合收益的税后净额怎么计算
  • 收到的财政补贴如何做账
  • 建筑行业劳务费开发票可以开工程款吗?
  • 金融衍生工具的特点不包括
  • 园林工程的范围包括哪些?
  • 怎么计算附加税税率
  • 烟花爆竹入库须知
  • 路由器和光猫上的无线网络名称一样吗
  • 为离职员工代缴社保 如何规避法律责任
  • win11怎么压缩图片画质
  • Mac怎么设置默认排序方式
  • 贷款钱到账又被转出去
  • 独资子公司如何注册
  • php空间怎么用
  • 华硕路由器登录地址
  • php做
  • php如何提高程序运行效率
  • 酒店代销合同范本
  • 转让旧设备
  • ajax的使用场景
  • 替票报销开什么发票
  • 最新版本TVBox配置地址
  • 向境外企业支付咨询费
  • etc电子发票需要多久才能开
  • 房屋维修费属于什么税收分类编码
  • 织梦模板官网
  • 归属于母公司所有者权益合计
  • 所有者权益包括哪些会计科目
  • 营改增之后发票的变化
  • 汇算清缴补缴所得税摘要怎么写的
  • 增值税发票已抵扣怎么红冲
  • 只有进项税需要结转吗
  • 网络服务费怎么入账
  • 积分兑换礼品需要什么
  • 软件开发公司账一定按项目做吗
  • 公司的软件服务器设置什么意思啊
  • 往来账清账
  • 其他非流动资产包括哪些
  • sqlserver多表查询 索引
  • ubuntu安装linux五笔输入法
  • Win10自带输入法打不出中文
  • linux chkdsk
  • linux系统批量查找替换多个字符
  • windows2008
  • msswchx.exe - msswchx进程是什么文件 有何作用
  • 如何win10
  • win10 directx9
  • win7系统盘u盘
  • win8怎么添加wifi
  • Win10预览版桌面图标和任务栏不翼而飞怎么办?
  • win7网页有错误如何修复?
  • 学习英语
  • Android OnTouchEvent, onClick, onLongClick调用机制
  • perl脚本use strict
  • vue2里面ref的具体使用方法
  • 基于flask框架
  • unity3d总结
  • android布局文件放在哪
  • js函数嵌套函数的return
  • jq 鼠标事件
  • jquery.browser
  • python的params
  • python dj
  • 怎么用jquery
  • tiny rails汉化
  • 天津市国税局网站
  • 怎样查询灵活就业养老保险缴费记录
  • 广西税务局热线电话
  • 国家税务总局电话人工客服
  • 税务网上申报怎样操作
  • 全国税收总收入完成59260.61
  • 土地交的契税会计科目
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设