（一）效果圖

（二）使用元件說明

元件使用的是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;
			//可以放請求的介面及付款後的判斷等
		}