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

  • word怎么插图片在指定位置(word怎么插图片当背景)

    word怎么插图片在指定位置(word怎么插图片当背景)

  • 华为p40pro是100倍变焦的吗(华为p40 pro多少倍)

    华为p40pro是100倍变焦的吗(华为p40 pro多少倍)

  • 华为p30充电发热(华为p30充电发热怎么回事)

    华为p30充电发热(华为p30充电发热怎么回事)

  • 微信号必须用手机注册吗(微信号必须用手机号才能申请吗,手机号码必须实名制吗)

    微信号必须用手机注册吗(微信号必须用手机号才能申请吗,手机号码必须实名制吗)

  • 抖音怎么删除转发的视频(抖音怎么删除转发过视频的人)

    抖音怎么删除转发的视频(抖音怎么删除转发过视频的人)

  • 怎么拉黑手机版拼多多店铺(手机如何拉黑对方号码)

    怎么拉黑手机版拼多多店铺(手机如何拉黑对方号码)

  • 电脑开机后卡死(电脑开机后卡死任务管理器用不了)

    电脑开机后卡死(电脑开机后卡死任务管理器用不了)

  • 红米耳机盒子电量怎样查询(redmi耳机放进盒子为什么不亮)

    红米耳机盒子电量怎样查询(redmi耳机放进盒子为什么不亮)

  • 一个文件的扩展名通常用来表示(一个文件的扩展名不能表示)

    一个文件的扩展名通常用来表示(一个文件的扩展名不能表示)

  • 支付宝首页默认服务不可编辑(支付宝首页默认应用如何修改?)

    支付宝首页默认服务不可编辑(支付宝首页默认应用如何修改?)

  • 登录账号和密码怎么填(网页如何记住你的登录账号和密码)

    登录账号和密码怎么填(网页如何记住你的登录账号和密码)

  • 手机的出厂设置在哪里找(如何恢复华为手机的出厂设置)

    手机的出厂设置在哪里找(如何恢复华为手机的出厂设置)

  • 闲鱼卖家评价可以删除吗(闲鱼卖家评价可以发图片吗)

    闲鱼卖家评价可以删除吗(闲鱼卖家评价可以发图片吗)

  • 淘宝确定了收货还能退货吗(淘宝确定了收货还能退款吗)

    淘宝确定了收货还能退货吗(淘宝确定了收货还能退款吗)

  • ips后面加个lgd什么意思(lgd ips ah ips)

    ips后面加个lgd什么意思(lgd ips ah ips)

  • 电脑酷狗没声音怎么弄(电脑酷狗没声音怎么回事)

    电脑酷狗没声音怎么弄(电脑酷狗没声音怎么回事)

  • 苹果手机可不可以下载两个微信(苹果手机可不可以登陆两个微信)

    苹果手机可不可以下载两个微信(苹果手机可不可以登陆两个微信)

  • 华为运动健康怎么添加公交卡(华为运动健康怎么连接手表)

    华为运动健康怎么添加公交卡(华为运动健康怎么连接手表)

  • qq音乐下载的歌曲怎么导入u盘(qq音乐下载的歌曲怎么转换mp3)

    qq音乐下载的歌曲怎么导入u盘(qq音乐下载的歌曲怎么转换mp3)

  • 在word中进行定位操作应按的快捷键是(在word文档中通过设置什么可以快速定位)

    在word中进行定位操作应按的快捷键是(在word文档中通过设置什么可以快速定位)

  • 苹果8怎么调横屏幕(苹果8怎么调横屏)

    苹果8怎么调横屏幕(苹果8怎么调横屏)

  • 草垛的意思(草垛的意思是什么 四季的雨)

    草垛的意思(草垛的意思是什么 四季的雨)

  • iphone8几核(iphone8几核处理器)

    iphone8几核(iphone8几核处理器)

  • mpp文件转换excel(mpp文件转换xlsx)

    mpp文件转换excel(mpp文件转换xlsx)

  • word目录加一行的方法(word中目录怎么添加一行)

    word目录加一行的方法(word中目录怎么添加一行)

  • 怎么解决苹果手机前置摄像头拍照是反的(怎么解决苹果手机信号不好的问题)

    怎么解决苹果手机前置摄像头拍照是反的(怎么解决苹果手机信号不好的问题)

  • hdr模式是什么意思(hdr mode)

    hdr模式是什么意思(hdr mode)

  • ipad新手使用指南(ipad新手使用指南2018)

    ipad新手使用指南(ipad新手使用指南2018)

  • 十六进制转换成十进制(十六进制转换成十进制计算器)

    十六进制转换成十进制(十六进制转换成十进制计算器)

  • DedeCMS做博客首页生成列表分页的另类实现办法(博客首页设计)

    DedeCMS做博客首页生成列表分页的另类实现办法(博客首页设计)

  • 公允价值变动损益属于什么科目
  • 支付客户劳务费怎么操作
  • 小规模纳税人的起征点是多少
  • 开票方丢失记账怎么处理
  • 增值税加计扣除5%政策
  • 正常工资薪金所得是什么意思
  • 采购货款属于什么会计科目
  • 房地产土地使用税已售面积如何减
  • 外企缴纳社保
  • 收到捐赠物资会计处理
  • 公司账户转账转错了能退回来吗
  • 纳税人取得不动产进项税额怎么抵扣
  • 顾客让抹零头应对话术
  • 税控设备可以跨省销售吗
  • 工资薪金支出怎么调整
  • 代收电费可以开发票吗
  • 主营业务税金及附加包括印花税吗
  • 园林绿化工程的分项工程有几个
  • 技术服务费可以计入研发费用吗
  • 季节工有工伤吗
  • 个税按月算和按年算为什么不一样
  • 销售方开票不填开户行
  • 增值税发票压线能用吗
  • 过路费企业所得税汇算清缴计入什么科目?
  • 出售固定资产属于收入
  • 专票当普票入帐有问题吗
  • 1697508230
  • 会务费税务处理
  • 联想thinkpad安装win7方法
  • 怎样设置登录帐号和密码
  • vmware10怎么安装
  • ramaint.exe - ramaint是什么进程 有什么用
  • linux 阿里云源
  • 土地使用税如何终止申报
  • 分享php源码批量运行
  • 无线路由器怎么连接
  • 结转已销产品实收成本
  • 伦索伊斯马拉赫塞斯国家公园
  • 用tomcat部署web项目
  • 技术服务费可以计入成本吗
  • 同业拆入属于哪个行业
  • 关于 ChatGPT 必看的 10 篇论文
  • XGboost算法预测股价模型
  • 三代手续费返还计入什么科目
  • 房屋出租怎么开电子发票
  • 城建税退回怎么做分录
  • 畜牧业科技公司
  • 退税没有退的部分怎么做账
  • mysql5.7.27安装与配置
  • mysql集群三种方式
  • 简述sql server
  • 税款所属期止是怎么写
  • 商贸企业的存货周转率什么水平属于正常
  • 单位购买的化妆品怎么用
  • 水电费没有收到怎么处理
  • 总资产利润率一般为多少
  • 你知道实施“营改增”对企业有哪些积极的效应么?
  • 承兑汇票的贴现利息
  • 发票上的数量怎么填写
  • 小规模怎么申请核定征收
  • mysql5.7.20安装
  • centos中如何查看ip地址
  • win10通讯设置在哪
  • windows无法访问\\192.168.1.104
  • linux free 命令
  • iptables -l -n
  • linux里chmod用法
  • js如何使用
  • shell脚本for循环 计算1到100的和
  • 谈谈jQuery Ajax用法详解
  • nodejs的理解
  • node.js怎么样
  • 用python写周字
  • JavaScript的removeChild()函数用法详解
  • 浅谈JQuery+ajax+jsonp 跨域访问
  • 国家税务总局是正部级还是副部级
  • 安徽残疾人补助过年有多少钱
  • 北京交通政务
  • 传统服务贸易和新兴服务贸易如何区分
  • 外商投资的企业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设