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

Semantisierung von HTML-Tags (einschließlich H5)

einführen HTML stellt die kontextuelle Struktur u...

Das Docker-Intranet erstellt DNS und verwendet den Domänennamenzugriff anstelle des IP:Port-Vorgangs.

Wenn ich beispielsweise einen Jenkins-Server in m...

Methoden und Schritte zum Erstellen eines Docker-basierten Nginx-Dateiservers

1. Erstellen Sie auf diesem Computer eine neue Ko...

Lösung für das Problem der adaptiven Höhe und Breite der CSS-Anzeigetabelle

Definition und Verwendung Die Anzeigeeigenschaft ...

Detaillierte Erklärung zur Lösung des Problems „Position: Fester fester Positionierungsversatz“

Frage Die feste CSS-Positionierung position:fixed...

Verwenden Sie das Tool nginx.vim zur Syntaxhervorhebung und Formatierung der Konfigurationsdatei nginx.conf

Ich verwende tengine, das Installationsverzeichni...

Tutorial zur Installation von PHP5, Deinstallation von PHP und Installation von PHP7 auf CentOS

Installieren Sie zunächst PHP5 ganz einfach yum i...

So kapseln Sie Axios in ein Vue-Projekt (einheitliche Verwaltung von HTTP-Anfragen)

1. Voraussetzungen Bei der Entwicklung von Front-...

Eine detaillierte Diskussion der Komponenten in Vue

Inhaltsverzeichnis 1. Komponentenregistrierung 2....

So verbergen Sie die Versionsnummer in Nginx

Nginx verbirgt die Versionsnummer In einer Produk...

Tutorial zur Installation von Microsoft TrueType-Schriftarten auf Ubuntu-basierten Distributionen

Wenn Sie einige Microsoft-Dokumente mit LibreOffi...

MySQL-Implementierung für pessimistisches und optimistisches Sperren

Inhaltsverzeichnis Vorwort Tatsächlicher Kampf 1....

Vue implementiert die Tabellenpaging-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Was soll ich tun, wenn ich die Quelldatei einer Webseite nicht anzeigen kann?

F: Wenn Sie Outlook oder IE verwenden, wird beim ...

Eine kurze Einführung in die Basiskomponenten der VUE uni-app

1. Scroll-Ansicht Beim vertikalen Scrollen müssen...