uniapp使用uview實現彈出鍵盤輸入密碼/驗證碼功能

（一）效果圖

（二）使用組件說明

組件使用的是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;
			//可以放請求的接口及付款后的判斷等
		}