Detaillierte Erklärung zur Verwendung der Vue-Komponente zur Kennzeichensuche

Detaillierte Erklärung zur Verwendung der Vue-Komponente zur Kennzeichensuche

Eine einfache Nummernschild-Eingabekomponente (vue) zu Ihrer Information, der spezifische Inhalt ist wie folgt

Code:

Vue-Code:

<Vorlage>
    <div Klasse="zieht">
      <!-- Präzise Kennzeichensuche-->
      <div Klasse="enterPlate">
        <div class="enterBox" :style="{width:noRightPart==='on'?'100%':''}">
          <div :class="['prov',EnterPlateNumber.input.whitchKey===0?'isEntering':'']" @click.stop="enterProv">{{EnterPlateNumber.input.firstWord}}</div>
          <div :class="['alb',EnterPlateNumber.input.whitchKey===1?'isEntering':'']" @click.stop="enterAlbn">{{EnterPlateNumber.input.secondWord}}</div>
          <div :class="['plate',EnterPlateNumber.input.whitchKey===2?'isEntering':'']" :style="{width:noRightPart==='on'?'350rpx':''}" @click.stop="enterLastn">{{EnterPlateNumber.input.lastWords}}</div>
        </div>
        <div Klasse="doneBox">
          <div Klasse="doneLeft">
            <button type="primary" size="small" @click="toSearch">Suchen</button>
          </div>
          <div Klasse="doneRight" v-if="noRightPart!='on'">
            <u-Symbolname="Listenpunkt"></u-Symbol>
            Filter
        </div>
      </div>

      <!-- Popup-Fenster der Tastatur-->
      <!-- Provinzabkürzung-->
      <div class="MASK" v-if="EnterPlateNumber.input.showProvince===true" :style="{width:noNeedMask==='y'?0:'',height:noNeedMask==='y'?0:'',marginTop:maskTop?maskTop/75+'rem':0+'rem'}">
        <div class="Provinz" >
          <div Klasse="btns">
            <button type="primary" size="small" plain @click="hiddenKeybord">Abbrechen</button>
            <!-- <button type="primary" size="small" plain @click="changeKeyBord">Tastatur wechseln</button> -->
            <button type="primary" size="small" plain @click="enterWord">Bestätigen</button>
          </div>
          <ul class="keyboard province" id="province">
            <li v-for="(item,index) in EnterPlateNumber.input.provinceList" :key="index" @click.stop="enterPro(item)">{{item.provinceName}}</li>
            <!-- <li class="delete" @click.stop="deletePro"><i class="icon">&#xe602;</i>Löschen</li> -->
            <li class="delete" @click.stop="deleteAlb"><i class="icon">&#xe602;</i>Löschen</li>
          </ul>
        </div>
      </div>
      
      <!-- Zahlen und Buchstaben-->
      <div class="MASK" v-if="EnterPlateNumber.input.showAlb===true" :style="{width:noNeedMask==='y'?0:'',height:noNeedMask==='y'?0:'',marginTop:maskTop?maskTop/75+'rem':0+'rem'}">
        <div class="Provinz Provinzen" >
          <div Klasse="btns">
            <button type="primary" size="small" plain @click="hiddenKeybord">Abbrechen</button>
            <!-- <button type="primary" size="small" plain @click="changeKeyBord">Tastatur wechseln</button> -->
            <button type="primary" size="small" plain @click="enterWord">Bestätigen</button>
          </div>
          <ul class="Tastaturnummer" id="Nummer" >
            <li :class="['num',EnterPlateNumber.input.whitchKey===1?'disabled':'']" v-if="item.isNumber===true" v-for="(Artikel) in EnterPlateNumber.input.plateAlbList" :key="Artikel.AlbName" @click.stop="enterAlb(Artikel)">{{Artikel.AlbName}}</li>
            <li v-if="item.isNumber===false" v-for="(item) in EnterPlateNumber.input.plateAlbList" :key="item.AlbName" @click.stop="enterAlb(item)">{{item.AlbName}}</li>
            <li class="delete löscht" @click.stop="deleteAlb"><i class="icon">&#xe602;</i>Löschen</li>
          </ul>
        </div>
      </div>
    </div>
</Vorlage>
<style scoped lang="scss">
  .enterPlate{
    Höhe: 70rpx;
    Hintergrund: #fff;
    Polsterung: 10rpx 20rpx;
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    .enterBox{
      Breite: 73%;
      Anzeige: Flex;
      .isEntering{
        Rahmenfarbe: RGB (57,195,153);
      }
      div{
        Breite: 70rpx;
        Höhe: 70rpx;
        Zeilenhöhe: 75rpx;
        Rand: 1,5rpx durchgezogener RGBA (0,0,0,0,15);
        Rahmenradius: 10rpx;
        Hintergrund: #fff;
        Rand rechts: 20rpx;
        Schriftgröße: 30rpx;
        Textausrichtung: zentriert;
      }
      .Platte{
        Breite: 300rpx;
        Höhe: 70rpx;
        Textausrichtung: links;
        Texteinzug: 10rpx;
      }
    }
    .doneBox{
      Breite: 27%;
      Anzeige: Flex;
      Inhalt ausrichten: Abstand dazwischen;
      Elemente ausrichten: zentrieren;
      .doneRight{
        Anzeige: Flex;
        Flex-Richtung: Spalte;
        Inhalt ausrichten: zentriert;
        Elemente ausrichten: zentrieren;
      }
    }
    Taste{
      Höhe: 70rpx;
      Polsterung: 0 10rpx;
      Zeilenhöhe: 70rpx;
    }

  }
    .zieht{
      // Polsterung: 0 0 20rpx 0;
      Hintergrund: #fff;
      .Name{
        Höhe: 60rpx;
        Zeilenhöhe: 60rpx;
        Schriftgröße: 28rpx;
        Farbe: RGBA (0,0,0,0,85);
        // Schriftstärke: fett;
      }
      .plateBOx{
        Höhe: 100rpx;
        Anzeige: Flex;
        Inhalt ausrichten: Abstand dazwischen;
        .pLeft{
          Breite: 50%;
          Höhe: 100rpx;
          Überlauf: versteckt;
          img{
            Breite: 100 %;
          }
        }
        .pRechts{
          Breite: 50%;
          Höhe: 100rpx;
          Polsterung links: 10rpx;
          Rand: 1rpx durchgezogener RGB (57,195,153);
          Anzeige: Flex;
          Elemente ausrichten: zentrieren;
          .spät{
            Schriftstärke: fett;
            Schriftgröße: 30rpx;
            Breite: 60%;
            Höhe: 100rpx;
            Zeilenhöhe: 100rpx;
            Eingang{
              Höhe: 100%;
            }
          }
          Taste{
            Rand: 1rpx durchgezogener RGB (57,195,153);
          }
        }
      }
      .MASKE{
        Position: fest;
        unten: 0;
        links: 0;
        Z-Index: 9999;
      }
      //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;
      }
      .Provinz{
        Position: relativ;
        .btns{
          Breite: 100vw;
          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;
          }
        }
      }
      .Provinzen{
        Position: relativ;
        .btns{
          Breite: 100vw;
          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: -428rpx;
          links: 0;
          Taste{
            Rand: 0;
          }
        }
      }
      .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 + 155 rpx);
      }
      .deaktiviert{
        Farbe: rgba(0,0,0,0,15);
      }
    }
</Stil>

Ereignis:

exportiere let Leben = {
  erstellt () {
    dieses.aktuelleKennzeichen = diese.Kennzeichennummer
    console.log(diese.Kennzeichennummer)
    this.EnterPlateNumber.input.firstWord = this.plateNumber.slice(0,1)
    this.EnterPlateNumber.input.secondWord = this.plateNumber.slice(1,2)
    this.EnterPlateNumber.input.lastWords = this.plateNumber.slice(2,9)
  }
}
exportiere let Ereignis = {
  zuSuchen(){
    this.methods('hiddenKeybord',2)
    dies.$emit('confirmChangePlate')
  },
  Platte ändern(){
    //Tastatur anzeigen this.methods('changePlate')
    this.methods('saveOringinPlate')
  },
  //Abbrechen hiddenKeybord(){
    this.methods('hiddenKeybord',2)
  },
  //Worteingabe bestätigen(){
    this.methods('Wort eingeben')
    this.methods('versteckteTastatur',1)
  },
  //Ändern Sie „confirmChangePlate()“ {
    dies.$emit('confirmChangePlate')
  },
  //Klicken Sie auf das Provinz-Eingabefeld enterProv(){
    this.methods('enterProv',true)
  },
  //Klicken Sie auf die Provinz async enterPro(item){
    let isOk = warte auf dies.Methoden('enterPro',Artikel)
    wenn(istOk){
      this.methods('enterAlbn',true)
    }
  },
  //Provinz löschen deletePro(){
    diese.Methoden('deletePro')
  },

  //Klicken Sie auf das Buchstabeneingabefeld enterAlbn(){
    this.methods('enterAlbn',true)
  },
  //Klicken Sie auf die Nummer async enterAlb(item){
    let isOk = warte auf dies.Methoden('enterAlb',Element)
    wenn(istOk===2){
      diese.Methoden('setKey',2)
    }
  },
  //Löschen des Ziffernblocks async deleteAlb(){
    let isOk = warte auf diese.Methoden('deleteAlb')
    wenn(istOk === 1){
      diese.Methoden('setKey',0)
      this.methods('enterProv',true)
      this.EnterPlateNumber.input.firstWord = ''
    }
    wenn(istOk===2){
      diese.Methoden('setKey',2)
      // diese.Methoden('enterAlbn',true)
    }
    wenn(istOk===3){
      diese.Methoden('setKey',1)
      // diese.Methoden('enterAlbn',true)
      this.EnterPlateNumber.input.secondWord = ''
    }
  },

  //Klicken Sie auf das verbleibende Buchstabenfeld enterLastn(){
    this.methods('enterLastn',true)
  },

  //Suche clickSearch(){
    let str1 = this.EnterPlateNumber.input.firstWord
    let str2 = this.EnterPlateNumber.input.secondWord
    let str3 = this.EnterPlateNumber.input.lastWords
    dies.$emit('clickSearch',str1+str2+str3)
  },
}
exportiere let watch = {}

Methoden:

Standardklasse exportieren {
  Wort eingeben(){
    // dies.$emit('update:Kennzeichen', dies.Kennzeichen1)
  }

  versteckteTastatur(Wert){
    wenn(Wert===2){
      Konsole.log(diese.aktuellePlatte)
      diese.Plattennummer1 = diese.aktuellePlatte
      this.EnterPlateNumber.input.firstWord = this.currentPlate.slice(0,1)
      this.EnterPlateNumber.input.secondWord = this.currentPlate.slice(1,2)
      this.EnterPlateNumber.input.lastWords = this.currentPlate.slice(2,9)
      this.EnterPlateNumber.input.showProvince = false
      this.EnterPlateNumber.input.showAlb = false
    }
    wenn(Wert===1){
      this.EnterPlateNumber.input.showProvince = false
      this.EnterPlateNumber.input.showAlb = false
    }
    
  }

  enterProv(Wert){
    this.EnterPlateNumber.input.showProvince = Wert
    this.EnterPlateNumber.input.showAlb = false
    this.EnterPlateNumber.input.whitchKey = 0
  }

  setzeSchlüssel(Wert){
    this.EnterPlateNumber.input.whitchKey = Wert
  }

  async enterPro(Wert){
    let isOk = false
    this.EnterPlateNumber.input.firstWord = val.provinceName
    wenn(this.EnterPlateNumber.input.firstWord!=''){
      istOk = wahr
    }
    Rückkehr istOk
  }

  deletePro(){
    this.EnterPlateNumber.input.firstWord = ''
  }

  enterAlbn(Wert){
    this.EnterPlateNumber.input.showAlb = Wert
    this.EnterPlateNumber.input.showProvince = false
    this.EnterPlateNumber.input.whitchKey = 1
  }

  async enterAlb(Wert){
    sei isOk = 1
    wenn(this.EnterPlateNumber.input.whitchKey === 1&typeof(val.AlbName)==='number'){
      istOk = 1
      zurückkehren
    }
    wenn (this.EnterPlateNumber.input.whitchKey === 1) {
      istOk = 2
      this.EnterPlateNumber.input.secondWord = val.AlbName
    }
    wenn (this.EnterPlateNumber.input.whitchKey === 2) {
      istOk = 3
      let str = val.AlbName.toString()
      wenn(this.EnterPlateNumber.input.lastWords.length>5){
        uni.showToast({
          Symbol: "keine",
          Dauer: 1000,
          Position: 'oben',
          Titel: „Das Kennzeichen darf nicht länger als 8 Ziffern sein“,
        })
        zurückkehren
      }anders{
        this.EnterPlateNumber.input.lastWords+=str
      }
    }
    Rückkehr istOk
  }

  enterLastn(val){
    this.EnterPlateNumber.input.showAlb = Wert
    this.EnterPlateNumber.input.showProvince = false
    this.EnterPlateNumber.input.whitchKey = 2
  }

  asynchrones Löschen von Alb(){
    sei isOk = 0
    wenn (this.EnterPlateNumber.input.whitchKey === 1) {
      this.EnterPlateNumber.input.secondWord = ''
      istOk = 1
    }
    wenn (this.EnterPlateNumber.input.whitchKey === 2) {
      let len ​​= this.EnterPlateNumber.input.lastWords.length
      this.EnterPlateNumber.input.lastWords = this.EnterPlateNumber.input.lastWords.substr(0, this.EnterPlateNumber.input.lastWords.length - 1)
      len--
      console.log(Länge)
      wenn(Länge===-1){
        wenn(this.EnterPlateNumber.input.lastWords===''){
          istOk = 3
        }anders{
          istOk = 2
        }
      }
    }
    Rückkehr istOk
  }

  Farbauswahl wechseln() {
    this.selectVisible = !this.selectVisible
  }

  setColor (Farbe) {
    this.currentColor = Farbe
  }

}

Modelldaten:

exportiere let props = ['Name','Kennzeichen','keinrechtesTeil']
exportiere let Modell = {
  aktuellePlatte: undefiniert,
  Kennzeichen eingeben:{
    Eingang:{
      erstesWort:'',
      zweitesWort:'',
      letzteWorte:'',
      Provinzliste:[
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Jin',id:'Jin'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Liao',id:'Liao'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'黑',id:'黑'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'provinz',id:'provinz'},
        {provinceName:'闽',id:'闽'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Lu',id:'Lu'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'鄂',id:'鄂'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Gui',id:'Gui'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'陕',id:'陕'},
        {provinceName:'Gan',id:'Gan'},
        {provinceName:'青',id:'青'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'Provinz',id:'Provinz'},
        {provinceName:'領',id:'領'},
        {provinceName:'provinz',id:'provinz'},
        {provinceName:'Provinz',id:'Provinz'},
      ],
      PlattenAlbListe:[
        {AlbName:0,id:'0',isNumber:true},
        {AlbName:1,id:'1',isNumber:true},
        {AlbName:2,id:'2',isNumber:true},
        {AlbName:3,id:'3',isNumber:true},
        {AlbName:4,id:'4',isNumber:true},
        {AlbName:5,id:'5',isNumber:true},
        {AlbName:6,id:'6',isNumber:true},
        {AlbName:7,id:'7',isNumber:true},
        {AlbName:8,id:'8',isNumber:true},
        {AlbName:9,id:'9',isNumber:true},
        {AlbName:'A',id:'A',isNumber:false},
        {AlbName:'B',id:'B',isNumber:false},
        {AlbName:'C',id:'C',isNumber:false},
        {AlbName:'D',id:'D',isNumber:false},
        {AlbName:'E',id:'E',isNumber:false},
        {AlbName:'F',id:'F',isNumber:false},
        {AlbName:'G',id:'G',isNumber:false},
        {AlbName:'H',id:'H',isNumber:false},
        {AlbName:'J',id:'J',isNumber:false},
        {AlbName:'K',id:'K',isNumber:false},
        {AlbName:'L',id:'L',isNumber:false},
        {AlbName:'M',id:'M',isNumber:false},
        {AlbName:'N',id:'N',isNumber:false},
        {AlbName:'P',id:'P',isNumber:false},
        {AlbName:'Q',id:'Q',isNumber:false},
        {AlbName:'R',id:'R',isNumber:false},
        {AlbName:'S',id:'S',isNumber:false},
        {AlbName:'T',id:'T',isNumber:false},
        {AlbName:'U',id:'U',isNumber:false},
        {AlbName:'V',id:'V',isNumber:false},
        {AlbName:'W',id:'W',isNumber:false},
        {AlbName:'X',id:'X',isNumber:false},
        {AlbName:'Y',id:'Y',isNumber:false},
        {AlbName:'Z',id:'Z',isNumber:false},
        {AlbName:'Name',id:'Name',isNumber:false},
        {AlbName:'Name',id:'Name',isNumber:false},
        {AlbName:'Name',id:'Name,isNumber:false'}
      ],
      showProvince:false, //Zeige die Provinz showAlb:false, //Zeige die Buchstabentastatur whitchKey:0
    }
  },
  selectVisible: false,
}
exportiere let berechnet = {
  Kennzeichennummer1 : {
    erhalten () {
      gib diese Kennzeichennummer zurück||''
    },
    setze (Wert) {
      dies.$emit('update:Kennzeichen', val)
    }
  }
}

Da hier ein einzigartiges Framework verwendet wird, werden die entsprechenden Lebenszyklusfunktionen nach Bedarf an der normalen Position des Vue-Projekts platziert und das Ereignis als normale Funktion geschrieben. Die Methoden sind die Methoden in den normalen Methoden von i und das Modell sind die in den Daten zurückgegebenen Daten.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zur Verwendung der Vue-Nummernschild-Eingabekomponente
  • Verwenden Sie die Vue3+Vant-Komponente, um die Suchverlaufsfunktion der App zu implementieren (Beispielcode).
  • Vue elementui implementiert den Beispielcode der öffentlichen Komponentenkapselung der Suchleiste
  • Detaillierte Erläuterung der Kapselung und Anwendung der allgemeinen Bedingungssuchkomponenten von Vue2.x
  • Durchsuchbare Dropdown-Box-Funktion für Vue-Komponenten
  • Implementierungscode der Vue-Dropdown-Menükomponente (einschließlich Suche)
  • Die el-input-Komponente des Vue.js-Projekts hört auf die Eingabetaste, um das Beispiel der Suchfunktion zu implementieren
  • Implementierung einer benutzerdefinierten Komponente für ein durchsuchbares Dropdown-Feld basierend auf Vue
  • Vue-Komponente implementiert durchsuchbare Dropdown-Box-Erweiterung
  • Detaillierte Erläuterung der Verwendung der Vue2.0-Suchkomponente mit mehreren Bedingungen

<<:  So ändern Sie das Passwort und legen die Richtlinie zur Passwortkomplexität in Ubuntu fest

>>:  Lassen Sie uns über die Merkmale und Isolationsstufen von MySQL-Transaktionen sprechen

Artikel empfehlen

Ist MySQL eine relationale Datenbank?

MySQL ist ein relationales Datenbankverwaltungssy...

Alibaba Cloud Centos7 Installation und Konfiguration von SVN

1. SVN-Server installieren yum installiere Subver...

Das Vue-Projekt implementiert eine Fortschrittsbalkenfunktion für den Dateidownload

Im täglichen Geschäftsleben gibt es zwei gängige ...

So erstellen Sie ein php-nginx-alpine-Image von Grund auf in Docker

Obwohl ich bereits einige Projekte in einer Docke...

Beispiel für ein WeChat-Applet zum Erzielen des rotierenden Laterneneffekts

Vorwort In der täglichen Entwicklung stoßen wir h...

Vue-Entwicklungsbaumstrukturkomponenten (Komponentenrekursion)

In diesem Artikelbeispiel wird der spezifische Co...

CSS-Positionierungslayout (Position, Positionierungslayoutfähigkeiten)

1. Was ist Positionierung? Das Positionsattribut ...

HTML-Grammatik-Enzyklopädie_HTML-Sprachgrammatik-Enzyklopädie (unbedingt lesen)

Datenträgerbezeichnung, Eigenschaftsname, Beschre...

Detaillierte Erklärung verschiedener Join-Zusammenfassungen von SQL

SQL Left Join, Right Join, Inner Join und Natural...