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

  • 微信暗黑模式怎么切换(微信暗黑模式怎么关闭)(微信暗黑模式怎么设置关闭)

    微信暗黑模式怎么切换(微信暗黑模式怎么关闭)(微信暗黑模式怎么设置关闭)

  • 苹果x怎么开热点(苹果x怎么开热点网络)

    苹果x怎么开热点(苹果x怎么开热点网络)

  • 微信号可以卖给别人吗(在哪里可以买微信号呢)

    微信号可以卖给别人吗(在哪里可以买微信号呢)

  • 抖音1万音浪可以提现多少人民币(抖音1万音浪可以兑换多少人民币)

    抖音1万音浪可以提现多少人民币(抖音1万音浪可以兑换多少人民币)

  • 华为微信视频美颜开启的方法(华为微信视频美颜设置关闭)

    华为微信视频美颜开启的方法(华为微信视频美颜设置关闭)

  • 服务器被攻击怎么办(服务器被攻击怎么举报)

    服务器被攻击怎么办(服务器被攻击怎么举报)

  • xp系统开机蓝屏怎么办(老电脑开机就0x0000007b蓝屏)

    xp系统开机蓝屏怎么办(老电脑开机就0x0000007b蓝屏)

  • 华为自带天气软件卸载了怎么恢复(华为自带天气软件下载)

    华为自带天气软件卸载了怎么恢复(华为自带天气软件下载)

  • 苹果手机能投影到墙上吗(苹果手机能投影联想小新吗)

    苹果手机能投影到墙上吗(苹果手机能投影联想小新吗)

  • 1字节表示几位二进制数(1字节=____位)

    1字节表示几位二进制数(1字节=____位)

  • cpu睿频什么意思(cpu睿频是越高越好么)

    cpu睿频什么意思(cpu睿频是越高越好么)

  • 苹果手机突然卡住了也不能关机是怎么回事(苹果手机突然卡了怎么回事)

    苹果手机突然卡住了也不能关机是怎么回事(苹果手机突然卡了怎么回事)

  • 为什么抖音拍同款显示网络不给力(为什么抖音拍同款音乐不完整)

    为什么抖音拍同款显示网络不给力(为什么抖音拍同款音乐不完整)

  • 手机淘宝视频怎么下载(手机淘宝视频怎么下载保存)

    手机淘宝视频怎么下载(手机淘宝视频怎么下载保存)

  • 退出excel窗口的快捷键是什么(退出excel窗口的快捷键是)

    退出excel窗口的快捷键是什么(退出excel窗口的快捷键是)

  • ipad可以用u盘吗(ipad可以用优盘吗)

    ipad可以用u盘吗(ipad可以用优盘吗)

  • vivo手机储存卡在哪(vivo手机储存卡数据怎么恢复)

    vivo手机储存卡在哪(vivo手机储存卡数据怎么恢复)

  • 手机为什么没有铃声(手机为什么没有快充了)

    手机为什么没有铃声(手机为什么没有快充了)

  • 微信怎么设置开机自启动(微信怎么设置开播提醒)

    微信怎么设置开机自启动(微信怎么设置开播提醒)

  • 苹果8云盘满了怎么删除(苹果云盘满了怎么把照片移到云盘里)

    苹果8云盘满了怎么删除(苹果云盘满了怎么把照片移到云盘里)

  • 手机突然变卡怎么回事(手机突然变卡怎么办)

    手机突然变卡怎么回事(手机突然变卡怎么办)

  • 手机插u盘在哪里打开(手机插u盘在哪里打开vivo)

    手机插u盘在哪里打开(手机插u盘在哪里打开vivo)

  • 耕地占用税是什么税种
  • 计提应收的增值税返还
  • 分公司非独立核算是什么意思
  • 企业购买房产如何列入投资计划的
  • 企业所得税25%怎么这么高
  • 电费 进项税
  • 逾期增值税扣税凭证抵扣问题
  • 建筑业预征缴纳税款
  • 电子发票有发票代码吗
  • 新三板企业转主板条件
  • 物业水费电费
  • 单位卖报纸的钱算什么
  • 商家收白条
  • 如何备份电脑系统到另外一个硬盘
  • 咋激活windows
  • 建筑业产值填哪个数据
  • 苹果手机怎么刷机
  • linux监控系统命令
  • incognito.exe
  • 计提减值后折旧年限怎么算
  • 最大交易笔数什么意思
  • 蔚蓝的海怎么样
  • Jetson Xavier NX配置全过程——安装jtop和OpenCV4.5.3(二)
  • vue中el-dialog
  • 赡养老人专项扣除标准
  • Vue3【Transition(效果、CSS 过渡、使用animation、TransitionGroup、 KeepAlive、Teleport )】(七)-全面详解(学习总结---从入门到深化)
  • gfortran编译命令
  • 企业实际发生的与取得收入有关的支出
  • 个体工商户没有收入要交税吗
  • 什么情况下需要异地预缴增值税
  • 预缴的企业所得税怎么做账
  • 深入了解jvm
  • 更改sql server数据库名
  • 收到进项发票怎么入账
  • 专项资金支出流程
  • mongodb添加数据库
  • 未分配利润可以挂多久
  • 广告制作费怎么入账
  • 获取验证码平台
  • 付款人和开票人必须相符吗
  • 员工报销货款会计分录怎么写
  • 本月销售商品会计分录
  • 其他应收款在现金流量表怎么填
  • 办理税务登记需要多久
  • 境外运费支付属什么费用
  • 文化事业建设费会计分录
  • 财务费用利息属于什么科目
  • 一般纳税人的资格登记
  • 进口免税产品如何开票
  • 应收账款管理应该收集哪些信息
  • 代销商品怎么开票
  • 互联网企业资产评估
  • 应纳税工资是应发还是实发
  • 开票需要缴纳印花税吗
  • 小规模纳税人销售使用过的固定资产
  • 增值税专用发票使用规定 最新
  • 离职员工代缴社保协议
  • 退回多交增值税账务处理小规模
  • 无偿租借
  • 税控开具发票
  • 银行承兑汇票怎么做账
  • 什么是其他应收款科目
  • winxp系统安装教程
  • 用centos搭建服务器的详细教程
  • win7系统笔记本怎么连接蓝牙耳机
  • WIN10系统中读卡器驱动的正确安装程序
  • win7玩英雄联盟卡顿怎么解决
  • opengll
  • php消息队列面试题及答案
  • ecmascript5
  • pg搭建
  • JavaScript+html5 canvas实现图片破碎重组动画特效
  • 简述javascript中的函数
  • Python制作钟表代码
  • 税务机关一案双查管理办法
  • 财务报表的收入平稳
  • 酒店行业区分小巨头企业
  • 下设机构和内设的区别
  • 鞋类进口关税
  • 地源热泵有收费标准吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设