A little nagging before we start

Front end small white ~ daze wrote a pay dish, came to dig gold, offer his debut ~

<div class="goods-psd"> <p class="apply-title"> 0.2rem"> Confirm payment <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>Copy the code
  • Regardless of whether the logic is understood or not, it is always good to write out the style first

Thinking to comb

1. Input box uses for loop, loop out 6 input; 2. The following keys use a for loop to facilitate later storage of records; 3. Add the entered password to the PASGroup array. 4. Define the subscript of the input box and put the pasGroup array contents into the input according to the subscript; 5. Start coding

code

data () {
   return {
     popupVisible1: true.realInput: ' '.password: '111'.passwordGroup: [].number: ['1'.'2'.'3'.'4'.'5'.'6'.'7'.'8'.'9'.'cancel'.'0'.'delete'].pasgroup: [].currentInputIndex:- 1}}Copy the code

Define the elements we need in data

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

Loop out the input, assign its content to value:null, and display six input fields on the interface

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

Listen for changes in the index of the array and print the array when the index reaches 5

inputPsd (value) {
      switch (value) {
        case 'cancel':
          this.currentInputIndex = - 1
          this.pasgroup = []
          this.initPasswordGroup ()
          break;
        case 'delete':
          this.pasgroup.pop()
          console.log(this.pasgroup)
          // this.currentinputIndex subscript value, which is changed when added
          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
      }
    },
Copy the code

Get the clicked element, clear the contents of the input field when clicking ‘Cancel’, and clear the array; When ‘Delete’ is clicked, subscript values are successively decrement and value is reset to NULL; When other numbers are clicked, the subscript values are incremented, and the contents of pasgroup[] are written into passwordGroup[] to be displayed in the input box. On the sauce ~ completed the desired effect ~