Vue仿支付寶支付功能

更新時間：2018年05月25日 16:51:22 作者：丿歌頌者

這篇文章主要介紹了Vue仿支付寶支付功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

先給大家上個效果圖：

<div class="goods-psd">
  <p class="apply-title">
   請輸入支付密碼
  </p>
  <p style="margin: 0.2rem">確認支付 <span>{{password}}</span> </p>
  <div class="psd-container">
   <input class="psd-input" type="password" readonly v-for="(value,index) in passwordGroup" :key="index" :value="value.value">
  </div>
 </div>
 <div class="input-pan">
  <div class="pan-num" v-for="(value,num) in number" :key="num" @click="inputPsd(value)">{{value}}</div>
 </div>
</div>

不管邏輯有沒有搞懂，先把樣式寫出來總是沒錯啦~

思路梳理

1.輸入框使用for循環(huán)，循環(huán)出6個input； 2.下面的按鍵使用for循環(huán)，便于后期存儲記錄； 3.將所輸入的密碼放入到pasgroup數(shù)組中； 4.定義輸入框的下標，將pasgroup數(shù)組內容按照下標依次放入input內； 5.開始代碼啦~

代碼

data () {
  return {
   popupVisible1: true,
   realInput: '',
   password: '111',
   passwordGroup: [],
   number: ['1','2','3','4','5','6','7','8','9','取消','0','刪除'],
   pasgroup: [],
   currentInputIndex:-1
  }
 }

在data內定義好我們需要的元素

initPasswordGroup () {
 this.passwordGroup=[];
 for(var i=0;i<6;i++){
  this.passwordGroup.push({
    value:null
  })
 }
}

循環(huán)出input，將其內容賦值為value:null，在界面上顯示出6個輸入框

watch: {
  currentInputIndex (val) {
   if(val == 5){
    console.log(this.pasgroup)
   }else if(val <= -1){
    this.currentInputIndex = -1
   }
  }
 }

監(jiān)聽數(shù)組下標的變化，當下標到5的時候打印出該數(shù)組

inputPsd (value) {
   switch (value) {
    case '取消':
     this.currentInputIndex = -1
     this.pasgroup = []
     this.initPasswordGroup ()
     break;
    case '刪除':
     this.pasgroup.pop()
     console.log(this.pasgroup)
     // this.currentInputIndex 下標值,刪除添加時改變
     this.passwordGroup[this.currentInputIndex].value = null
     this.currentInputIndex--
     console.log(this.passwordGroup)
     break;
    default:
     this.pasgroup.push(value)
     this.currentInputIndex++
     this.passwordGroup[this.currentInputIndex].value = value
   }
  },

獲取到所點擊的元素，當點擊‘取消'時清空input 輸入框內的內容，清除數(shù)組；當點擊‘刪除'時，下標值依次減減，將value重置為null；當點擊其他數(shù)字時，下標值依次增加，將數(shù)組pasgroup[]里面的內容寫進passwordGroup[]里面，在輸入框中展示。

總結

以上所述是小編給大家介紹的Vue仿支付寶支付功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: