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-input
					v-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-input
					v-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学习使用~