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"></i>Löschen</li> --> <li class="delete" @click.stop="deleteAlb"><i class="icon"></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"></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:
|
<<: 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
MySQL ist ein relationales Datenbankverwaltungssy...
1. SVN-Server installieren yum installiere Subver...
Im täglichen Geschäftsleben gibt es zwei gängige ...
Vorwort Wenn es um Datenbanktransaktionen geht, f...
Inhaltsverzeichnis Was ist cgroup Zusammensetzung...
Manchmal möchten wir, dass die Textfelder im Formu...
Obwohl ich bereits einige Projekte in einer Docke...
Vorwort In der täglichen Entwicklung stoßen wir h...
In diesem Artikelbeispiel wird der spezifische Co...
1. Was ist Positionierung? Das Positionsattribut ...
Dieser Artikel zeichnet die Installations- und Ko...
Datenträgerbezeichnung, Eigenschaftsname, Beschre...
SQL Left Join, Right Join, Inner Join und Natural...
VMWare (Virtual Machine Ware) ist ein Softwareunt...
Was ist ein absteigender Index? Sie kennen sich v...