u-code-input结合u-keyboard实现支付密码+数字键盘

一、需求描述、框架

（一）技术框架

1. uniapp + uView2.0
2. 采用了u-code-input验证码组件和u-keyboard键盘组件
3. https://uviewui.com/components/codeInput.html
4. https://uviewui.com/components/keyboard.html

（二）需求

1. 实现支付密码的首次输入和二次确认
2. 不使用系统键盘，采用uView的数字键盘。如果使用系统键盘，虽然可以唤起数字类型的键盘，但输入法依然可以切换成中英文和符号输入。
3. 输入框输入6位数后，按钮改为可用状态，否则为禁用状态

二、效果图

三、代码实现

（一）u-code-input组件小改造

1. 把组件里的所有#ifndef APP-PLUS代码删掉，总共有3处，否则输入框的光标在APP端会不显示（俺也不知道为什么原组件要加上这个限制）
   
2. 对u-code-input__item元素，增加命中的class，方便对命中的框框加上命中的class
   
3. 对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学习使用~