u-code-input结合u-keyboard实现支付密码+数字键盘
- 一、需求描述、框架
- (一)技术框架
- (二)需求
- 二、效果图
- 三、代码实现
- (一)u-code-input组件小改造
- (二)功能实现
一、需求描述、框架
(一)技术框架
uniapp
+uView2.0
- 采用了
u-code-input
验证码组件和u-keyboard
键盘组件 - https://uviewui.com/components/codeInput.html
- https://uviewui.com/components/keyboard.html
(二)需求
- 实现支付密码的
首次输入
和二次确认
- 不使用系统键盘,采用uView的
数字键盘
。如果使用系统键盘,虽然可以唤起数字类型的键盘,但输入法依然可以切换成中英文和符号输入。 - 输入框输入6位数后,按钮改为可用状态,否则为禁用状态
二、效果图
三、代码实现
(一)u-code-input组件小改造
- 把组件里的所有
#ifndef APP-PLUS
代码删掉,总共有3处,否则输入框的光标在APP端会不显示(俺也不知道为什么原组件要加上这个限制)
- 对
u-code-input__item
元素,增加命中的class,方便对命中的框框加上命中的class
- 对
input
元素,把原来的
:focus="focus"
改为
:focus="!disabledKeyboard && focus"
查看官方文档描述如下:
虽然官方文档这么写,只需要设置:disabledKeyboard="true"
就可以禁止唤起系统键盘,但是实测并不行!!!
原来是组件代码里disabledKeyboard
只用在了input的disabled
属性上,虽然禁用了input,但禁不住focus=true
时的键盘自动唤起啊!
4、 增加input元素click
的emit
事件,因为input被禁用了,只能以click事件通知父组件输入框什么时候被点击了(点击了即获取焦点,唤起键盘)
自此,u-code-input改造完毕~
(二)功能实现
1、DOM代码
<template><view><template v-if="firstStatus"><view class="code-box"><view class="code-title">请输入{{pswLength}}位支付密码</view><u-code-inputv-model="firstPsw":maxlength="pswLength":size="39"dot:disabledKeyboard="true":focus="firstPswFocus"@click="focusFirstPsw"></u-code-input><view class="code-desc">说明:支付密码仅用于在线支付时的付钱操作,请勿泄露给其他人。</view><u-button text="下一步" color="#ffd400" class="btn" :disabled="firstBtnDisabeld" @click="nextStep"></u-button></view></template><template v-else><view class="code-box"><view class="code-title">请再次输入,以确认密码</view><u-code-inputv-model="secondPsw":maxlength="pswLength":size="39"dot:disabledKeyboard="true":focus="secondPswFocus"@click="focusSecondPsw"></u-code-input><view class="code-desc">说明:支付密码仅用于在线支付时的付钱操作,请勿泄露给其他人。</view><u-button text="完 成" color="#ffd400" class="btn" :disabled="secondBtnDisabeld" @click="submit"></u-button></view></template><!-- 数字键盘 --><u-keyboard ref="uKeyboard" mode="number" class="keyboard":closeOnClickOverlay="true":tooltip="false":show="keyboardShow"@close="keyboardClose"@cancel="keyboardClose"@change="keyboardChange"@backspace="keyboardBackspace"></u-keyboard></view>
</template>
2、JS代码
<script>export default {data() {return {pswLength: 6,// 首次输入firstStatus: true,firstPsw: '',firstPswFocus: false,firstBtnDisabeld: true,// 确认密码secondPsw: '',secondPswFocus: false,secondBtnDisabeld: true,// 键盘keyboardShow: false,}},created() {this.focusFirstPsw();},watch: {firstPsw(val){// 首次密码输入结束if(val.length == this.pswLength){this.firstBtnDisabeld = false;this.keyboardShow = false;}else{this.firstBtnDisabeld = true;}},secondPsw(val){// 确认密码输入结束if(val.length == this.pswLength){if(this.firstPsw != val){uni.showToast({title: '两次密码不一致,请重新设置',icon: 'none',duration: 2000})setTimeout(()=>{this.resetPsw();}, 1000)}else{this.secondBtnDisabeld = false;this.keyboardShow = false;}}else{this.secondBtnDisabeld = true;}}},methods: {// 首次密码获取焦点focusFirstPsw(){this.firstPswFocus = true;this.keyboardShow = true;},// 下一步nextStep(){this.firstStatus = false;this.focusSecondPsw();},// 确认密码获取焦点focusSecondPsw(){this.secondPswFocus = true;this.keyboardShow = true;},// 提交后端submit(){// 对接接口uni.showToast({title: '设置成功',icon: 'none',duration: 2000})setTimeout(()=>{uni.navigateBack()}, 2000)},// 重新设置密码resetPsw(){this.firstPsw = '';this.firstStatus = true;this.firstBtnDisabeld = true;this.focusFirstPsw();this.secondPsw = '';this.secondBtnDisabeld = true;},/***************键盘****************/// 键盘keyboardClose(){this.keyboardShow = false;this.firstPswFocus = false;this.secondPswFocus = false;},// 按下键盘keyboardChange(val){if(this.firstStatus && this.firstPsw.length<this.pswLength){this.firstPsw += val;}else if(!this.firstStatus && this.secondPsw.length<this.pswLength){this.secondPsw += val;}},// 退格键被点击keyboardBackspace() {if(this.firstStatus){if(this.firstPsw.length) {this.firstPsw = this.firstPsw.substr(0, this.firstPsw.length - 1);}}else{if(this.secondPsw.length) {this.secondPsw = this.secondPsw.substr(0, this.secondPsw.length - 1);}}}}}
</script>
3、CSS
<style lang="scss" scoped>.code-box {padding: 30px;}.code-title {font-size: 22px;font-weight: bold;margin-bottom: 30px;}.code-desc{margin: 25px 0 10px 0;font-size: 14px;color: #888;}.btn {margin-top: 20px;}// 密码输入框::v-deep .u-code-input {justify-content: space-between;.u-code-input__item{border-radius: 4px;.u-code-input__item__dot{background-color: #232426 !important;}}// 命中框的边框颜色.u-code-input__item__active{border-color: #ffd400 !important;}} // 键盘笼罩改为透明::v-deep .keyboard .u-transition {background-color: transparent !important;}
</style>
本篇只是自己的一些想法,只做demo学习使用~