文章目錄
- （一）效果圖
- （二）使用組件說明
- （三）HTML代碼及涉及到的屬性解釋
- keyboard屬性：
- keyboard事件：
- MessageInput屬性：
- MessageInput事件：
- （四）css樣式
- （五）js代碼實作
- 資料：
- 事件：
（一）效果圖
（二）使用組件說明
組件使用的是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;
//可以放請求的介面及付款后的判斷等
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/393949.html
標籤：其他