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

  • 雅迪乐骑plus怎么连接手机(雅迪乐骑plus怎么下架了)

    雅迪乐骑plus怎么连接手机(雅迪乐骑plus怎么下架了)

  • 吉祥码能查出14天轨迹吗(吉祥码能查出10天的用码记录)

    吉祥码能查出14天轨迹吗(吉祥码能查出10天的用码记录)

  • 快手账号显示TA什么意思(快手账号显示该账号已重置是什么意思)

    快手账号显示TA什么意思(快手账号显示该账号已重置是什么意思)

  • 朋友圈能发多少文字(朋友圈能发多少分钟的视频)

    朋友圈能发多少文字(朋友圈能发多少分钟的视频)

  • 电脑网页打不开怎么回事(电脑网页打不开是什么原因及解决方法)

    电脑网页打不开怎么回事(电脑网页打不开是什么原因及解决方法)

  • 微信群待办是干什么的(微信群待办有什么作用)

    微信群待办是干什么的(微信群待办有什么作用)

  • 笔记本电脑鼠标没反应怎么回事(笔记本电脑鼠标触摸板没反应)

    笔记本电脑鼠标没反应怎么回事(笔记本电脑鼠标触摸板没反应)

  • 微信不符合辅助要求怎么办(微信不符合辅助验证资格是什么原因)

    微信不符合辅助要求怎么办(微信不符合辅助验证资格是什么原因)

  • 乐播投屏没有投屏码(乐播投屏没有投相册)

    乐播投屏没有投屏码(乐播投屏没有投相册)

  • 小米盒子遥控器声音调不了(小米盒子遥控器电池是什么型号的)

    小米盒子遥控器声音调不了(小米盒子遥控器电池是什么型号的)

  • 为什么苹果手机下载不了软件一直要验证(为什么苹果手机充到80%就充不进去了)

    为什么苹果手机下载不了软件一直要验证(为什么苹果手机充到80%就充不进去了)

  • 为什么知乎加载不出来(为什么知乎加载的图片是黑白色的)

    为什么知乎加载不出来(为什么知乎加载的图片是黑白色的)

  • xr死机怎么重启(xr死机了)

    xr死机怎么重启(xr死机了)

  • oppo调字体大小在哪里(oppo字体大小怎么调节)

    oppo调字体大小在哪里(oppo字体大小怎么调节)

  • 代表网页文件的扩展名为(代表网页文件的文件名后缀是)

    代表网页文件的扩展名为(代表网页文件的文件名后缀是)

  • icp在哪备案(icp备案去哪办理)

    icp在哪备案(icp备案去哪办理)

  • iphonex辅助键怎么设置(苹果x怎么把辅助按钮调出来)

    iphonex辅助键怎么设置(苹果x怎么把辅助按钮调出来)

  • 荣耀Magic Watch 2支持哪些运动模式(荣耀magicwatch2手表怎么下载软件)

    荣耀Magic Watch 2支持哪些运动模式(荣耀magicwatch2手表怎么下载软件)

  • 显卡装在什么位置(显卡装在什么位置最好)

    显卡装在什么位置(显卡装在什么位置最好)

  • 毒app一直收不到验证码(为什么毒收件人没收到短信)

    毒app一直收不到验证码(为什么毒收件人没收到短信)

  •  word怎么设置纸型16开(Word怎么设置纸张方向为横向)

    word怎么设置纸型16开(Word怎么设置纸张方向为横向)

  • 一个手机可以注册几个抖音号(一个手机可以注册几个qq号码)

    一个手机可以注册几个抖音号(一个手机可以注册几个qq号码)

  • keyiso是什么进程 服务中的Keyiso服务器是否是病毒(kjournald是什么进程)

    keyiso是什么进程 服务中的Keyiso服务器是否是病毒(kjournald是什么进程)

  • Cookie会话跟踪技术(cookie 会话)

    Cookie会话跟踪技术(cookie 会话)

  • 新个税年终奖计算公式
  • 年终奖可以不计入年总收入吗
  • 广告公司属于服务企业吗
  • 股票印花税最新政策2023怎么算
  • 资本公积什么时候做账
  • 留底的预缴税款怎么处理?
  • 销售废旧物资增值税新政策
  • 不同税率的增值税如何报税
  • 公司人事怎么办公积金提取流程?
  • 零售环节销售金额标准
  • 非企业所得税税率
  • 旧设备变现损失抵减所得税怎么算
  • 日用品增值税税率
  • 罚息 增值税
  • 餐饮费发票税率是多少
  • 增值税怎么补提
  • 主营业务成本会计科目使用说明
  • 个体工商户支付宝怎么开票
  • 预提企业所得税税额怎么计算
  • 企业分立账务处理办法
  • 贷款公司利息收据怎么写
  • 电梯维修公司发展前景
  • 有关于秋天的诗句
  • 预付账款是负数有什么税收风险
  • 企业给予的折扣怎么入账
  • 以前年度的账错了怎么办
  • 打印机5b00错误解决
  • 支付以前年度增值税怎么做账
  • 自产产品用于业务招待 如何申报企业所得税
  • 八个与cpu相关的字符
  • 高新技术企业税率15%
  • 建筑公司预收账款一般是哪些
  • Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项
  • php linux常用命令
  • wordpress恢复主题默认设置
  • echart设置legend
  • 房屋所在地的房子怎么查
  • php图片上传插件
  • 蓝色向日葵
  • 权责发生制下确认的未开票收入是否缴纳增值税
  • input输入语句
  • php文件上传操作流程图
  • 信息技术服务是什么公司
  • phpcms插件
  • sql server 2005安装在2016
  • 税票和发票的区别图片
  • 应付福利费算支出吗
  • 劳务是什么单位
  • sql2005使用
  • 小规模纳税人申报步骤
  • 购入房产会计记账凭证怎么做
  • 增值税销项税额属于什么科目
  • 固定资产相关业务
  • 房地产开发企业资质管理规定
  • 12月计提的工资没有发完怎么做账
  • 材料报废处理
  • 申请享受免税资金的条件
  • 服务咨询类合同
  • 同期增长率如何计算
  • 存货周转率 高
  • xp文件夹选项在哪里打开
  • win10系统找不到mrt
  • linux操作系统安装包
  • linux高级选项
  • Linux查看内存的命令是
  • win8使用教程和技能
  • unity3D LineRender的使用
  • python pyo
  • cocos2d开发的知名游戏
  • cocos2d怎么用
  • jsp中onload事件
  • nodejs获取post数据
  • jQuery+Ajax实现无刷新操作
  • 深入理解两个大计重要论断心得体会
  • nodejs 动态网页
  • 安卓 html
  • jquery获取复选框是否被选中
  • 电子税务局打印发票提示本机未检测到
  • 企业所得税账务如何处理
  • 临沂市2020年居民燃气价格
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设