Detaillierte Erklärung zur Verwendung der Vue-Nummernschild-Eingabekomponente

<Vorlage>
    <div Klasse="enTer">
      <div Klasse="Platteneingabe" id="Platteneingabe">
        <div class="item" :class="{active: plateInput.input.type === 'p1'}" @click.stop="clickInput('p1')"><span id="p1">{{plateInput.input.value.p1}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p2'}" @click.stop="clickInput('p2')"><span id="p2">{{plateInput.input.value.p2}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p3'}" @click.stop="clickInput('p3')"><span id="p3">{{plateInput.input.value.p3}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p4'}" @click.stop="clickInput('p4')"><span id="p4">{{plateInput.input.value.p4}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p5'}" @click.stop="clickInput('p5')"><span id="p5">{{plateInput.input.value.p5}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p6'}" @click.stop="clickInput('p6')"><span id="p6">{{plateInput.input.value.p6}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p7'}" @click.stop="clickInput('p7')"><span id="p7">{{plateInput.input.value.p7}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p8',new: !plateInput.input.value.p8}" @click.stop="clickInput('p8')"><span id="p8">{{plateInput.input.value.p8}}</span></div>
      </div>
      <div Klasse="Bord" v-if="plateInput.input.dialogVisible">
        <div Klasse="bor">
          <div Klasse="btns">
            <button type="primary" size="small" plain @click="hiddenKeybord">Abbrechen</button>
            <button type="primary" size="small" plain @click="enterWord">Bestätigen</button>
          </div>
          <ul class="keyboard province" id="province" v-if="plateInput.input.dialogVisible && plateInput.input.type === 'p1'">
            <li v-for="i in Keyboard.province" @click.stop="clickKeyboard(i)">{{i}}</li>
            <li class="delete" @click.stop="clickDelete"><i class="icon">&#xe602;</i>Löschen</li>
          </ul>
          <ul Klasse="Tastaturprovinz" id="Nummer" v-if="plateInput.input.dialogVisible && plateInput.input.type !== 'p1'">
            <li v-for="i in Keyboard.number" :class="{num: plateInput.input.type === 'p2' && parseInt(i) >= 0 && parseInt(i) <= 9}" @click.stop="clickKeyboard(i)">{{i}}</li>
            <li class="delete löscht" @click.stop="clickDelete"><i class="icon">&#xe602;</i>Löschen</li>
          </ul>
        </div>
      </div>
    </div>
</Vorlage>
<style scoped lang="scss">
  .eingeben{
    .plateInput{
      Polsterung: 0 20rpx;
      Anzeige: Flex;
      Inhalt ausrichten: Abstand herum;
      .Artikel{
        Breite: 60rpx;
        Höhe: 75rpx;
        Rand: 1rpx durchgezogen #FF5100;
        Rahmenradius: 10rpx;
        Anzeige: Flex;
        Inhalt ausrichten: zentriert;
        Elemente ausrichten: zentrieren;
        Schriftgröße: 28rpx;
      }
      .aktiv{
        Rahmenfarbe: #3399ff;
      }
    }
    .bords{
      Position: fest;
      unten: 0;
      links: 0;
      Z-Index: 999;
      .bor{
        Position: relativ;
        .btns{
          Breite: 100 %;
          Höhe: 70rpx;
          Hintergrund: #fff;
          Rahmen oben: 1rpx durchgezogener RGBA (0,0,0,0,0,05);
          Position: absolut;
          Anzeige: Flex;
          Inhalt ausrichten: Abstand dazwischen;
          Elemente ausrichten: zentrieren;
          oben: -70rpx;
          links: 0;
          Taste{
            Rand: 0;
          }
        }
      }
      //Tastatur.Tastatur{
        Position: fest;
        unten: 0;
        links: 0;
        Hintergrundfarbe: #ced2d9;
        Breite: 100 %;
        Höhe: 360rpx;
        Rand: 0;
        Polsterung: 0;
        Schriftgröße: 36rpx;
        z-Index: 1;
      }
      .keyboard li {
          Listenstil: keiner;
          Rahmenradius: 10rpx;
      }
      .keyboard li {
          schweben: links;
          Hintergrundfarbe: #fefefe;
          Rand links: 15rpx;
          Rand oben: 15rpx;
      }
      .Nummer{
        Farbe: rgba(0,0,0,0,15);
      }
      .Provinz{
        Position: relativ;
      }
      .Provinzen{
        Position: relativ;
      }
      .Provinz li{
          Breite: berechnet ((100 % – 15 rpx * 11)/10);
          Höhe: berechnet ((100 % – 15 rpx * 5)/4);
          Anzeige: Flex;
          Anzeige: -webkit-flex;
          Elemente ausrichten: zentrieren;
          -webkit-align-items:center;
          Inhalt ausrichten: zentriert;
          -webkit-justify-content: zentrieren;
      }
      .provinz li.delete{
          Breite: berechnet ((100 % – 15 rpx * 11) / 10 * 2 + 15 rpx);
      }
      .provinz li.löscht{
          Breite: berechnet ((100 % – 15 Rpx * 11)/10 * 2 + 90 Rpx);
      }
      .deaktiviert{
        Farbe: rgba(0,0,0,0,15);
      }
    }
  }
</Stil>

exportiere let Leben = {
  erstellt () {
    // dieses.aktuelleKennzeichen = diese.Kennzeichennummer
    // console.log(diese.Kennzeichennummer)
    // this.KennzeichennummerEnter.input.erstesWord = this.Kennzeichennummer.slice(0,1)
    // this.EnterPlateNumber.input.secondWord = this.plateNumber.slice(1,2)
    // this.EnterPlateNumber.input.lastWords = this.plateNumber.slice(2,9)
  }
}
exportiere let Ereignis = {
  clickInput (Typ) {
    diese.Methoden('clickInput',Typ)
  },
  KlickTastatur (Wert) {
    wenn (this.plateInput.input.type === 'p2' && parseInt(val) >= 0 && parseInt(val) <= 9) zurückgeben
    this.methods('KlickTastatur', val)
    this.methods('Kennzeichen setzen')
    this.methods('setDirectIssuedPlateNumber')
  },
  //Kennzeichen löschen clickDelete () {
    this.methods('clickDelete')
    this.methods('Kennzeichen setzen')
    this.methods('setDirectIssuedPlateNumber')
  },
  hiddenKeybord(){
    this.methods('hiddenKeybord')
  },
  Wort eingeben(){
    this.methods('Wort eingeben')
  }
}
exportiere let watch = {}

Standardklasse exportieren {
  clickInput(Typ){
    this.plateInput.input.type = Typ
    this.plateInput.input.dialogVisible = true
  }
  hiddenKeybord(){
    this.plateInput.input.dialogVisible = false
  }
  Wort eingeben(){
    this.plateInput.input.dialogVisible = false
  }
  KlickTastatur (Wert) {
    dieser.Platteneingang.Eingabewert[dieser.Platteneingang.Eingabetyp] = Wert
    let Typ = this.plateInput.input.type.split('p')[1]
    wenn (Typ !== '8') {
      this.plateInput.input.type = "p" + (parseInt(Typ) + 1)
    }
  }
  klickLöschen () {
    this.plateInput.input.value[this.plateInput.input.type] = undefiniert
    lass nu = diese.plateInput.input.type.split('p')[1]-1
    wenn(nu>=0){
      this.plateInput.input.value['p'+nu] = undefiniert
    }
    let Typ = this.plateInput.input.type.split('p')[1]
    wenn (Typ !== '1') {
      this.plateInput.input.type = "p" + (parseInt(Typ) - 1)
    }
  }
  setzeKennzeichen () {
    wenn (diese.Platteneingabe.Eingabe.Plattennummer) {
      diese.Kennzeichennummer1 = diese.Kennzeicheneingabe.input.Kennzeichennummer
    }anders{
      this.plateNumber1 = undefiniert
    }
  }
  setzeDirectIssuedPlateNumber () {
    wenn (diese.Platteneingabe.Eingabe.Plattennummer) {
      diese.Kennzeichennummer1 = diese.Kennzeicheneingabe.input.Kennzeichennummer
    }anders{
      this.plateNumber1 = nicht definiert
    }
  }

}

exportiere let props = ['Name','Kennzeichen','keinrechtesTeil']
exportiere let Modell = {
  aktuellePlatte: undefiniert,
  Platteneingabe:{
    Eingang:{
      Wert:{
        p1:'Gui',
        p2:'B',
        Seite 3:2,
        Seite 4:2,
        Seite 5:2,
        S. 6:2,
        S. 7:2,
        Seite 8:0
      },
      Typ: 'p1',
      dialogVisible:false
    }
  },
  Tastatur: {
    Provinz: ['Peking', 'Tianjin', 'Hebei', 'Shanxi', 'Innere Mongolei', 'Liaoning', 'Jilin', 'Heilongjiang', 'Shanghai', 'Jiangsu', 'Zhejiang', 'Anhui', 'Fujian', 'Ganzhou', 'Shandong', 'Henan', 'Hubei', 'Xiang', 'Guangdong', 'Qiong', 'Chongqing', 'Sichuan', 'Guizhou', 'Yunnan', 'Tibet', 'Shaanxi', 'Gansu', 'Qinghai', 'Nanjing', 'Xinjiang', 'Taiwan', 'Hongkong', 'Macao', 'Botschaft', 'Konsulat', 'Polizei', 'Bildung'],
    Zahl: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '香港', '澳']
  },
}
exportiere let berechnet = {
  Kennzeichennummer1 : {
    erhalten () {
      gib diese Kennzeichennummer zurück||''
    },
    setze (Wert) {
      dies.$emit('update:Kennzeichen', val)
    }
  }
}