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

  • PPTV网络电视节目播放黑屏的解决办法

    PPTV网络电视节目播放黑屏的解决办法

  • oppo手机手机按键怎么调出来(oppo手机按不动了怎么办)

    oppo手机手机按键怎么调出来(oppo手机按不动了怎么办)

  • 拼多多有年度账单吗(拼多多年度账单)

    拼多多有年度账单吗(拼多多年度账单)

  • iphone13pro怎么无线充电(iphone13pro无线)

    iphone13pro怎么无线充电(iphone13pro无线)

  • 电脑重置后键盘不能用了(电脑重置后键盘没反应)

    电脑重置后键盘不能用了(电脑重置后键盘没反应)

  • 当前网络无法连接互联网(当前网络无法连接云电脑)

    当前网络无法连接互联网(当前网络无法连接云电脑)

  • excel or函数(excel or函数出现name)

    excel or函数(excel or函数出现name)

  • 魅族17有红外线吗(魅族17有红外线功能吗)

    魅族17有红外线吗(魅族17有红外线功能吗)

  • 手机突然黑白色怎么回事(手机突然黑白色怎么解决方法)

    手机突然黑白色怎么回事(手机突然黑白色怎么解决方法)

  • 拼多多重复铺货限制多久(拼多多重复铺货店还能要吗)

    拼多多重复铺货限制多久(拼多多重复铺货店还能要吗)

  • 电子版身份证复印件怎么弄

    电子版身份证复印件怎么弄

  • 小爱同学可以当电脑音响用吗(小爱同学可以当路由器吗)

    小爱同学可以当电脑音响用吗(小爱同学可以当路由器吗)

  • windows2000是不是应用软件(windows2000是什么意思)

    windows2000是不是应用软件(windows2000是什么意思)

  • 学生怎么在钉钉里查看自己观看直播的时间(学生怎么在钉钉上网课)

    学生怎么在钉钉里查看自己观看直播的时间(学生怎么在钉钉上网课)

  • 日版和国行有什么区别(日版和国行有什么区别ipad)

    日版和国行有什么区别(日版和国行有什么区别ipad)

  • 苹果xr有没有超广角(苹果xr有超级快充吗)

    苹果xr有没有超广角(苹果xr有超级快充吗)

  • 华为天气怎么设置摄氏度(华为天气怎么设置在状态栏)

    华为天气怎么设置摄氏度(华为天气怎么设置在状态栏)

  • 怎样在电脑上给微信升级(怎样在电脑上给u盘杀毒)

    怎样在电脑上给微信升级(怎样在电脑上给u盘杀毒)

  • 微信换绑手机号频繁要多久(微信换绑手机号后原来的手机号可以注册新的微信吗)

    微信换绑手机号频繁要多久(微信换绑手机号后原来的手机号可以注册新的微信吗)

  • 麒麟990与骁龙855哪个厉害(麒麟990与骁龙855差多少)

    麒麟990与骁龙855哪个厉害(麒麟990与骁龙855差多少)

  • 华硕主板bios关闭uefi(华硕主板bios关闭风扇检测)

    华硕主板bios关闭uefi(华硕主板bios关闭风扇检测)

  • 怎样退出安全电脑安全模式(怎么退出电脑的安全模式怎么解除)

    怎样退出安全电脑安全模式(怎么退出电脑的安全模式怎么解除)

  • 怎样解除拉黑电话号码(拉黑电话怎么解除黑名单)

    怎样解除拉黑电话号码(拉黑电话怎么解除黑名单)

  • 原生JS的拖拽属性draggable(详解)(js实现拖拽选区的功能)

    原生JS的拖拽属性draggable(详解)(js实现拖拽选区的功能)

  • AI引领技术变革,自动化云平台所带来的测试工程师进阶危机~(ai引领技术变革是什么)

    AI引领技术变革,自动化云平台所带来的测试工程师进阶危机~(ai引领技术变革是什么)

  • 资金账簿印花税税率
  • 企业所得税如何合理避税?
  • 税务中的三费是指什么
  • 保本理财收益增值税纳税主体
  • 分支机构属于小型微利企业吗
  • 月末调整银行外币汇率会计分录
  • 印花税减半征收优惠政策2022
  • 劳务派遣增值税怎么算
  • 购房契税应该交给谁
  • 审计核减理由
  • 持有待售资产固定资产 要计提折旧吗
  • 预计销售退回的钱怎么算
  • 劳保统筹费用
  • 金融债券利息收入免企业所得税吗
  • 盈余公积转增资本有限制吗
  • 预付账款金额过大的原因
  • 国税变更办税人怎么变更
  • 企业所得税弥补亏损明细表怎么看
  • 资产负债表日是什么意思
  • 年底增值税有余额吗
  • 开票金额小于付款金额,怎么办理
  • 工资薪金所得的个人所得税筹划方法
  • 专用发票验旧后还领不到发票
  • 出口50万货物退多少税
  • 工资薪金支出的扣除标准
  • 建安企业享受的税收优惠2020年
  • 在国内和国外
  • php生成app
  • 开源鸿蒙适配
  • PHP:Memcached::quit()的用法_Memcached类
  • 即期结售汇期限包括
  • 公司整体收购缴税
  • php用mysql连接数据库并查询
  • 工程项目成本预算表
  • 创建javascript函数
  • ucenter中词语过滤原理分析
  • 搭建本地yum
  • 2023前端面试题目
  • 装系统如何不安装自带软件
  • thinkphp教程
  • 残保金申报缴纳时间
  • 企业扶贫捐赠简报范文
  • 理财产品的分红和收益是分开的吗
  • python中重写构造方法
  • 工资薪金和外出费用区别
  • 在mysql中创建数据库和表作业
  • sql存储过程几个主要步骤
  • 织梦如何使用
  • 个税显示退税成功但是没有收到钱
  • 固定资产直接进费用表示表示一次性计提折旧
  • sqlserver行列转换多行多列
  • 交易性金融资产公允价值变动怎么算
  • 清理固定资产是什么意思
  • 记账凭证填制完毕
  • 短期理财收益账务分录
  • 员工预支工资现金流量
  • 以前年度会计科目记错
  • 未分配利润如何计算
  • 发放工资并扣个人所得税
  • 原始凭证基本要求是什么
  • 扩展什么
  • mariadb10.1
  • fedora怎么用
  • freebsd软件安装
  • win7系统IE浏览器版本
  • 提高生殖能力
  • centos7安装完成后无法启动
  • mac 地址栏
  • 王牌竞速 小米
  • 在linux中使用v2ray
  • Windows 8 Modern Apps 网络隔离如何解除?
  • perl -p -i
  • js全局方法
  • android中的短信联系人管理,浏览器属于
  • bat脚本编写教程菜鸟
  • jquery-validate
  • 成都所见所得科技有限公司是什么平台
  • 去哪儿网客服电话怎么转人工
  • 账本遗失征管法处罚
  • 税控系统技术维护费每年都要交吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设