因項目需求，需要支付密碼的頁面，但是本人不想用現有的密碼輸入框插件的，於是只能自己動手自定義一個支付密碼的樣式。
當然，對於前段開發而言，對於樣式都是很簡單的，重點在於搞懂實現密碼輸入效果的ui交互原理。授人予魚不如授人予漁，望給各位碼友們一點幫助，共勉。
先上效果圖：
然后主要說一下實現原理，將input輸入框，定位於輸入效果顯示元素之上，並將input的opacity屬性設為0，使其透明不可見，點擊輸入時在通過input的輸入事件動態設置顯示元素的輸入、刪除的狀態。總的實現原理就是如此，是不是很簡單？？
然后我們上一下代碼。便於各位參考：
<view v-if="!isPass" class="setPassword">
<view class="clock">
<view class="clock-img"></view>
</view>
<view class="warning">請輸入原密碼</view>
<view class="pass-box">
<!-- <view class="label">請輸入<text class="red">6位數字</text>密碼：</view> -->
<view class="list">
<input type="number" @blur="verifyPassword(password)" @input="setOldPass" class="input" v-model.trim="oldPassword" />
<view class="view-box">
<view class="list-cell" v-for="(item,index) in oldPassArr" :key="index">{{item}}</view>
</view>
</view>
</view>
<view class="pass-box margin-top-sm">
<button class="subbtn" @tap="subTap">確定</button>
</view>
</view>
ui交互效果：
let str=e.detail.value;
let result = this.verifyNum(this.oldPassword);
if(result){
this.oldPassword=this.oldPassword.slice(0,6)
// if(this.password.length<7){
// 輸入密碼時，向box寫入
for(let i=0;i<this.oldPassword.length;i++){
this.oldPassArr[i]="·"
}
// 刪除密碼時，向box刪除
for(let j=this.oldPassword.length;j<6;j++){
this.oldPassArr[j]=""
}
// }else{
// }
console.log(this.oldPassword.length)
}else{
this.oldPassArr='';
for(let j=this.oldPassword.length;j<6;j++){
this.oldPassArr[j]=""
}
uni.showToast({
title:'密碼只能為6位數字密碼，請重新輸入',
icon:'none'
})
console.log(this.oldPassword.length)
}
各位看了是不是感覺很簡單呢，至於各種輸入驗證各位自己做看咯！