（一）效果图

（二）使用组件说明

组件使用的是uview组件，Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。
uview官方文档：
Keyboard 键盘：https://v1.uviewui.com/components/keyboard.html
MessageInput 验证码输入：https://v1.uviewui.com/components/messageInput.html
两个组件的相关属性和说明请参考官方文档，下面将仅把使用到的属性加以说明。

（三）HTML代码及涉及到的属性解释

按钮，用于显示密码输入部分：

	<button class="btn" @click="pay">付款</button>

密码输入部分，初始状态设置为隐藏：

		<u-keyboard @change="onChange" ref="uKeyboard" v-model="showKeyboard" @backspace="onBackspace" mode="number" :dot-enabled="false" :tooltip="false" default="">
			<view style="text-align: center;">
				请输入密码
			</view>
			<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true" @finish="finish"></u-message-input>
		</u-keyboard>

keyboard属性：

通过mode参数定义键盘的类型，v-model绑定一个值为布尔值的变量，我绑定的是showKeyboard变量，控制键盘的弹出与收起；
mode = number (默认值)为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"
mode = car 为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"
mode = card 为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"

通过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事件

MessageInput属性：

通过mode参数模式，可取如下值：
box(默认)-输入位置位一个方框
bottomLine-底部显示一条横线
middleLine-中部显示一条横线

通过maxlength参数配置可输入的方框个数，如6位验证码，该值设置为6即可
如果需要显示默认值，请通过value参数配置

dot-fill参数配置为true后，输入内容将不可见，用"●"替代输入内容，事件回调中会返回真实值

uView有键盘组件，如果您想结合键盘组件进行自定义的输入效果，就需要设置disabled-keyboard为true，来保证点击 输入框时不会触发系统自带的键盘，否则会造成冲突。

MessageInput事件：

每当输入内容发生改变，会回调一个change事件，内容为当前输入的字符串，如"395"
当输入的内容长度(字符个数)达到maxlength值后，会触发finish事件，同时也会触发change事件

（四）css样式

Keyboard 键盘和MessageInput 验证码输入自带样式，想要更改某部分样式可以参考文档进行修改。
按钮样式：

	.btn {
		background: linear-gradient(to right, #E5C9A6, #BD9959);
		width: 90%;
		margin-left: 5%;
		padding: 0;
		color: #FFFFFF;
		border-radius: 30px;
		margin-top: 60rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

效果：

（五）js代码实现

数据：

		data() {
			return {
				showKeyboard: false,//密码输入的显示隐藏
				password: ''//输入的密码
			}
		},

事件：

按钮点击显示：

		buy() {
			this.showKeyboard = true;
			this.password='';//唤醒输入组件时清空密码
		}

监听键盘输入：

		onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.finish();//封装的结束函数，我是在后续还有请求接口和判断等
				}
			},

监听键盘回退：

		onBackspace(e) {
			if (this.password.length > 0) {
				this.password = this.password.substring(0, this.password.length - 1);
			}
		},

结束函数：

		finish() {
			this.showKeyboard = false;
			//可以放请求的接口及付款后的判断等
		}