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

  • 192.168.31.1小米路由器设置(192.168.31.1小米路由器设置修改密码)

    192.168.31.1小米路由器设置(192.168.31.1小米路由器设置修改密码)

  • 手机收不到短信是什么原因(手机收不到短信)(手机收不到短信验证码的原因)

    手机收不到短信是什么原因(手机收不到短信)(手机收不到短信验证码的原因)

  • 腾讯会议演讲者视图怎么设置(腾讯会议演讲者模式如何设置)

    腾讯会议演讲者视图怎么设置(腾讯会议演讲者模式如何设置)

  • vivo x21多重(vivox21多重)

    vivo x21多重(vivox21多重)

  • 微信右上角三个点,没 了怎么办(微信右上角三个点隐藏)

    微信右上角三个点,没 了怎么办(微信右上角三个点隐藏)

  • 用户已被锁定什么意思(用户已锁定什么意思)

    用户已被锁定什么意思(用户已锁定什么意思)

  • 华为手机我保存的照片在哪里(华为手机我保存的图片上哪去了)

    华为手机我保存的照片在哪里(华为手机我保存的图片上哪去了)

  • 腾讯会议中途退出会有记录吗(腾讯会议中途退出了会累计时长吗)

    腾讯会议中途退出会有记录吗(腾讯会议中途退出了会累计时长吗)

  • ipad无线局域网打不开(ipad无线局域网打不开怎么办)

    ipad无线局域网打不开(ipad无线局域网打不开怎么办)

  • 微信怎么发送大于100m的视频(微信怎么发送大视频文件)

    微信怎么发送大于100m的视频(微信怎么发送大视频文件)

  • 主板和cpu怎么搭配(主板和cpu怎么搭建)

    主板和cpu怎么搭配(主板和cpu怎么搭建)

  • 微信投诉双方封号什么意思(微信投诉对方封号)

    微信投诉双方封号什么意思(微信投诉对方封号)

  • 电脑上的鼠标为什么不能用(电脑上的鼠标为什么不管用了)

    电脑上的鼠标为什么不能用(电脑上的鼠标为什么不管用了)

  • 微信黑夜模式在哪里(微信黑夜模式在哪里开OPPOr9S)

    微信黑夜模式在哪里(微信黑夜模式在哪里开OPPOr9S)

  • 为什么苹果11网络那么慢(为什么苹果11网络那么卡)

    为什么苹果11网络那么慢(为什么苹果11网络那么卡)

  • 手机怎么扫码连接wifi(手机怎么扫码连接热点)

    手机怎么扫码连接wifi(手机怎么扫码连接热点)

  • nfc怎么录取门禁卡(如何用nfc录入门禁卡)

    nfc怎么录取门禁卡(如何用nfc录入门禁卡)

  • 打印页面怎么设置(打印页面怎么设置标题每页都有)

    打印页面怎么设置(打印页面怎么设置标题每页都有)

  • 脱机使用打印机是什么意思(脱机使用打印机要勾选吗)

    脱机使用打印机是什么意思(脱机使用打印机要勾选吗)

  • 怎么边打电话边录音(怎么边打电话边发语音)

    怎么边打电话边录音(怎么边打电话边发语音)

  • iphonexr怎么开热点(苹果xr如何开热点)

    iphonexr怎么开热点(苹果xr如何开热点)

  • 硬盘温度过高(硬盘温度过高怎么解决)

    硬盘温度过高(硬盘温度过高怎么解决)

  • 王者荣耀中张飞怎么出装?(王者荣耀中张飞的台词)

    王者荣耀中张飞怎么出装?(王者荣耀中张飞的台词)

  • 开诊所会计如何做账
  • 补贴收入属于什么分配
  • 其他应付款长期挂账如何处理
  • 在建工程有增值税发票吗
  • 支付无法取得发票的赔偿金可否税前扣除
  • 查增应纳税所得额怎么算
  • 上年的应收帐款在本年度如何录入?
  • 聘用劳务人员派遣合法吗
  • 专票入账用哪一联
  • 装修公司怎么交钱
  • 免税企业取得增值税专用发票怎么处理
  • 2021年个人开发票税率
  • 小规模商贸公司成本核算方法
  • 建筑业如何核算费用
  • 关于营改增发票开具的热点问题
  • 公司注销无法支付的款项如何处理
  • 返还工资保证金的书面申请
  • 工业企业研发产品有哪些
  • 产品研发费用属于固定成本吗
  • 企业的污水处理设备可以间断性运行么
  • 精英主板设置u盘启动
  • 行纪人的权利
  • 公司帐户能直接转账吗
  • 附加税减免要计税吗
  • 收到多开的工程款怎么办
  • 支付宝提现到企业账户 怎么开票
  • 结转损益类收入账户的余额会计分录
  • php通用分页类
  • anaconda创建虚拟环境有什么用
  • sybyl安装教程
  • php各大框架以及实现原理
  • 先买入再卖出
  • 详解 HttpServletResponse
  • web前端 css
  • setup.cgi
  • php对接第三方支付
  • vue 快速上手
  • Python数学建模三剑客
  • 私对公可以转账吗?会对做账不利吗
  • sql server配置文件在哪
  • 比赛奖金怎么做账
  • 零税率与免税有何区别
  • 金蝶专业版数量金额明细账设置
  • 海关缴款通知书怎么查看
  • 劳务费入什么费用
  • 在防控新型冠状病毒肺炎期间经营者违反价格法
  • 积分换购怎么做账
  • 税务局代开的增值税专票可以红冲吗?
  • 外贸采购的职责
  • 弱电系统可以入户门吗
  • 会计的主要目标是提供什么和什么
  • 微软宣布Q3推出MRTKV3工具包
  • won10怎么安装
  • win10如何利用镜像安装系统
  • vi修改文件
  • centos7如何添加永久静态路由
  • win10系统安装.net framework 3.5
  • kavsvc.exe - kavsvc是什么进程 有什么作用
  • win10开机自动启动软件怎么设置
  • linux里面怎么截屏
  • Linux查看内存的命令是
  • 电脑没有网络连接怎么办
  • cocos2d教程
  • Extjs4中Form的使用之本地hiddenfield
  • store与storage的区别
  • node·js
  • 作用
  • perl ne
  • nodejs后端教程
  • node·js
  • javascript创建对象的几种方法
  • 基于jquery的框架
  • javascript的简介
  • unity closestpoint
  • js制作qq简易聊天框
  • jquery操作元素样式
  • 浙江通用电子发票查不到
  • 金米财税不退款怎么办
  • 计算当期免抵退税额
  • 郑州金水区税务大厅电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设