vue verwendet Ele.me UI, um die Filterfunktion von Teambition zu imitieren
ProblembeschreibungTeambition ist eine Software zur Zusammenarbeit in Unternehmen. Ich glaube, einige Unternehmen meiner Freunde haben diese Software verwendet. Die darin enthaltene Filterfunktion ist recht interessant. Dieser Artikel soll deren Funktion nachahmen. Werfen wir einen Blick auf das Endergebnis.
Die allgemeinen funktionalen Auswirkungen sind wie folgt
GedankenanalyseFür die Anforderungen eins und zwei müssen wir zunächst zwei Popup-Fenster im Vollbildmodus erstellen und dann zwei Arrays in den Daten definieren, eines für häufig verwendete Bedingungen und das andere für ungewöhnliche Bedingungen. Häufige Bedingungen werden per V-For in das erste Popup-Fenster und ungewöhnliche Bedingungen per V-For in das zweite Popup-Fenster eingefügt. Jedes Element im Array muss mit entsprechendem Inhalt konfiguriert werden, beispielsweise dem Namen des Filterfelds, etwa Name, Alter usw. Nachdem wir den Namen des Filterfelds haben, gibt es auch einen Typ. In HTML müssen wir drei Arten von Komponenten schreiben, z. B. Eingabefeldkomponente, Auswahlkomponente und Zeitauswahlkomponente. Verwenden Sie v-show, um die entsprechenden Felder entsprechend dem Typ anzuzeigen. Beispielsweise ist der Eingabetyp 1, der Auswahltyp 2 und der Zeitauswahltyp 3. Die anzuzeigende Komponente ist der Typ. Die entsprechenden beiden Arrays sind wie folgt:
topData: [ //Allgemeine Filterelemente konfigurieren {
wordTitle: "Name",
Typ: 1, // 1 ist Eingabe, 2 ist Auswahl, 3 ist DatePicker
Inhalt: "", // Inhalt sind die an das Eingabefeld gebundenen Eingabedaten Optionen: [], // Optionen sind der gesamte Inhalt des Dropdown-Felds. Sie können eine Anforderung senden, um ihn abzurufen und zu speichern. Hier ist die Simulation optionArr: [], // optionArr ist der ausgewählte Inhalt des Dropdown-Felds timeArr: [], // timeArr ist das Datumsauswahlintervall },
{
wordTitle: "Alter",
Typ: 1,
Inhalt: "",
Optionen: [],
optionArr: [],
ZeitArr: [],
},
{
wordTitle: "Unterrichtsklasse",
Typ: 2,
Inhalt: "",
Optionen: [ // Senden Sie eine Anfrage, um die Optionen der Dropdown-Box abzurufen {
ID: 1,
Wert: "Klasse 1",
},
{
ID: 2,
Wert: "Klasse 2",
},
{
ID: 3,
Wert: "Drei Schichten",
},
],
optionArr: [],
ZeitArr: [],
},
{
wordTitle: "Beitrittszeit",
Typ: 3,
Inhalt: "",
Optionen: [],
optionArr: [],
ZeitArr: [],
},
],
bottomData: [ //Ungewöhnliche Filterelemente konfigurieren {
wordTitle: "Arbeitsnummer",
Typ: 1,
Inhalt: "",
Optionen: [],
optionArr: [],
ZeitArr: [],
},
{
wordTitle: "Geschlecht",
Typ: 2,
Inhalt: "",
Optionen: [
{
ID: 1,
Wert: "Männlich",
},
{
ID: 2,
Wert: "Weiblich",
},
],
optionArr: [],
ZeitAnkunft: [],
},
],Der entsprechende HTML-Code lautet wie folgt:
<div Klasse="rechtsrechts">
<el-Eingabe
v-model.trim="Artikel.Inhalt"
löschbar
v-show="Artikel.Typ == 1"
Platzhalter="Bitte eingeben"
Größe="klein"
:popper-append-to-body="false"
></el-Eingabe>
<el-Auswahl
v-Modell="Artikel.OptionArr"
v-show="Artikel.Typ == 2"
mehrere
Platzhalter="Bitte auswählen"
>
<el-Option
v-for="welchesElement in Element.Optionen"
:Schlüssel="whatItem.id"
:label="welcherArtikel.Wert"
:Wert="welcheArtikel-ID"
Größe="klein"
>
</el-Option>
</el-Auswahl>
<el-Datumsauswahl
v-Modell="Artikel.timeArr"
v-show="Artikel.Typ == 3"
Typ="Datumsbereich"
Bereichstrennzeichen = "bis"
start-placeholder="Startdatum"
end-placeholder="Enddatum"
format="jjjj-MM-tt"
Werteformat="jjjj-MM-tt"
>
</el-Datumsauswahl>
</div>
Bei den Anforderungen drei und vier kann man es so beschreiben, dass die oberen gelöscht und auf die unteren reduziert werden. Klicken Sie unten, um nach oben zu springen. Die entsprechende Operation besteht also darin, ein Element aus dem oberen Array an das untere Array anzuhängen und dann das Element aus dem oberen Array zu löschen; ein Element aus dem unteren Array an das obere Array anzuhängen und dann diese Zeile zu löschen. (Beachten Sie, dass es auch einen Index gibt.) Der entsprechende Code lautet wie folgt:
/* Klicken Sie auf das Löschsymbol eines Elements, um das Element zum Array „bottomData“ hinzuzufügen und es anschließend aus dem Array „topData“ zu löschen (bestimmen Sie anhand des Index, um welches Element es sich handelt).
Löschen Sie abschließend einen und setzen Sie den Index auf den Anfangsindex - 1 */
Klicksymbol(i) {
dies.bottomData.push(diese.topData[i]);
dies.topData.splice(i, 1);
dies.welcherIndex = -1;
},
// Wenn Sie auf das untere Element klicken, verwenden Sie das Ereignisobjekt, um zu sehen, welches Element unten angeklickt wurde. // Hängen Sie dann das entsprechende Element zur Anzeige an topData an und löschen Sie das Element im unteren Array. // clickBottomItem(event) {
dies.bottomData.forEach((item, index) => {
wenn (Element.WortTitel == Ereignis.Ziel.innerText) {
dies.topData.push(Element);
dies.bottomData.splice(index, 1);
}
});
},
Die Anforderungen 5 und 6 sind einfach. Die entsprechenden Codes lauten wie folgt. Die vollständigen Codekommentare wurden geschrieben. Vollständiger Code
<Vorlage>
<div id="app">
<div Klasse="filterBtn">
<el-button Typ="primär" Größe="klein" @click="filterMaskOne = true">
Datenfilter<i class="el-icon-s-operation el-icon--right"></i>
</el-button>
<Übergangsname="Überblenden">
<div
Klasse="filterMaskOne"
v-show="filterMaskeEins"
@click="filterMaskOne = false"
>
<div Klasse="filterMaskOneContent" @click.stop>
<div Klasse="filterHeader">
<span>Datenfilterung</span>
</div>
<div Klasse="filterBody">
<div Klasse="outPrompt" v-show="topData.length == 0">
Es sind noch keine Filterbedingungen vorhanden, bitte fügen Sie Filterbedingungen hinzu...
</div>
<div
Klasse="filterBodyCondition"
v-for="(Element, Index) in Topdaten"
:Schlüssel="Index"
>
<div
Klasse="linkslinks"
@mouseenter="mouseEnterItem(index)"
@mouseleave="mausHinterlasseElement(index)"
>
<span
>{{ item.wordTitle }}:
<i
Klasse="el-icon-error"
v-show="welcherIndex == Index"
@click="KlickSymbol(index)"
></i>
</span>
</div>
<div Klasse="rechtsrechts">
<el-Eingabe
v-model.trim="Artikel.Inhalt"
löschbar
v-show="Artikel.Typ == 1"
Platzhalter="Bitte eingeben"
Größe="klein"
:popper-append-to-body="false"
></el-Eingabe>
<el-Auswahl
v-Modell="Artikel.OptionArr"
v-show="Artikel.Typ == 2"
mehrere
Platzhalter="Bitte auswählen"
>
<el-Option
v-for="welchesElement in Element.Optionen"
:Schlüssel="whatItem.id"
:label="welcherArtikel.Wert"
:Wert="welcheArtikel-ID"
Größe="klein"
>
</el-Option>
</el-Auswahl>
<el-Datumsauswahl
v-Modell="Artikel.timeArr"
v-show="Artikel.Typ == 3"
Typ="Datumsbereich"
Bereichstrennzeichen = "bis"
start-placeholder="Startdatum"
end-placeholder="Enddatum"
format="jjjj-MM-tt"
Werteformat="jjjj-MM-tt"
>
</el-Datumsauswahl>
</div>
</div>
</div>
<div Klasse="filterFooter">
<div Klasse="filterBtn">
<el-Schaltfläche
Typ="Text"
Symbol = "el-icon-circle-plus-outline"
@click="filterMaskTwo = true"
>Filterbedingung hinzufügen</el-button
>
<Übergangsname="Überblenden">
<div
Klasse="filterMaskeZwei"
v-show="filterMaskeZwei"
@click="filterMaskTwo = false"
>
<div Klasse="filterMaskContentTwo" @click.stop>
<div Klasse="innerPrompt" v-show="bottomData.length == 0">
Noch kein Inhalt...
</div>
<div
Klasse="contentTwoItem"
@click="Klick auf unterstesElement"
v-for="(Element, Index) in BottomData"
:Schlüssel="Index"
>
<div Klasse="mingzi">
{{ item.wordTitle }}
</div>
</div>
</div>
</div>
</Übergang>
</div>
<div Klasse="resetAndConfirmBtns">
<el-button size="small" @click="resetFilter">Zurücksetzen</el-button>
<el-button Typ="primär" Größe="klein" @click="Filter bestätigen"
>Bestätigen</el-Button
>
</div>
</div>
</div>
</div>
</Übergang>
</div>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Name: "App",
Daten() {
zurückkehren {
filterMaskOne: false, // Wird verwendet, um die Anzeige bzw. das Ausblenden von zwei Popup-Fenstern zu steuern filterMaskTwo: false,
whichIndex: -1, // Index zum Aufzeichnen von Klicks apiFilterArr:[], // Speichert den vom Benutzer eingegebenen Filterinhalt topData: [ // Konfigurieren Sie allgemeine Filterelemente {
wordTitle: "Name",
Typ: 1, // 1 ist Eingabe, 2 ist Auswahl, 3 ist DatePicker
content: "", // content sind die an das Eingabefeld gebundenen Eingabedaten options: [], // options sind der gesamte Inhalt des Dropdown-Felds optionArr: [], // optionArr ist der ausgewählte Inhalt des Dropdown-Felds timeArr: [], // timeArr ist das Datumsauswahlintervall },
{
wordTitle: "Alter",
Typ: 1,
Inhalt: "",
Optionen: [],
optionArr: [],
ZeitArr: [],
},
{
wordTitle: "Unterrichtsklasse",
Typ: 2,
Inhalt: "",
Optionen: [ // Senden Sie eine Anfrage, um die Optionen der Dropdown-Box abzurufen {
ID: 1,
Wert: "Klasse 1",
},
{
ID: 2,
Wert: "Klasse 2",
},
{
ID: 3,
Wert: "Drei Schichten",
},
],
optionArr: [],
ZeitArr: [],
},
{
wordTitle: "Beitrittszeit",
Typ: 3,
Inhalt: "",
Optionen: [],
optionArr: [],
ZeitArr: [],
},
],
bottomData: [ //Ungewöhnliche Filterelemente konfigurieren {
wordTitle: "Arbeitsnummer",
Typ: 1,
Inhalt: "",
Optionen: [],
optionArr: [],
ZeitArr: [],
},
{
wordTitle: "Geschlecht",
Typ: 2,
Inhalt: "",
Optionen: [
{
ID: 1,
Wert: "Männlich",
},
{
ID: 2,
Wert: "Weiblich",
},
],
optionArr: [],
ZeitArr: [],
},
],
};
},
montiert() {
// Beim Initialisieren der Ladung speichern wir eine Kopie der von uns konfigurierten, häufig und selten verwendeten Filterelemente. // Wenn der Benutzer auf die Schaltfläche „Zurücksetzen“ klickt, rufen wir sie ab und stellen den ursprünglichen Filterzustand wieder her. sessionStorage.setItem("topData",JSON.stringify(this.topData))
sessionStorage.setItem("bottomData",JSON.stringify(this.bottomData))
},
Methoden: {
//Bewegen Sie die Maus, um das Löschsymbol anzuzeigen mouseEnterItem(index) {
dies.welcherIndex = Index;
},
//Wenn die Maus den Cursor verlässt, kehrt der Index zum Standardwert -1 zurück.
Maus verlassen Item () {
dies.welcherIndex = -1;
},
/* Klicken Sie auf das Löschsymbol eines Elements, um das Element zum Array „bottomData“ hinzuzufügen und es anschließend aus dem Array „topData“ zu löschen (bestimmen Sie anhand des Index, um welches Element es sich handelt).
Löschen Sie abschließend einen und setzen Sie den Index auf den Anfangsindex - 1 */
Klicksymbol(i) {
dies.bottomData.push(diese.topData[i]);
dies.topData.splice(i, 1);
dies.welcherIndex = -1;
},
// Wenn Sie auf das untere Element klicken, verwenden Sie das Ereignisobjekt, um zu sehen, welches Element unten angeklickt wurde. // Hängen Sie dann das entsprechende Element zur Anzeige an topData an und löschen Sie das Element im unteren Array. // clickBottomItem(event) {
dies.bottomData.forEach((item, index) => {
wenn (Element.WortTitel == Ereignis.Ziel.innerText) {
dies.topData.push(Element);
dies.bottomData.splice(index, 1);
}
});
},
// Klicken Sie hier, um den Filter zu bestätigen async confirmFilter() {
// Wenn der Inhalt aller Eingabefelder leer ist, das ausgewählte Dropdown-Feld-Array leer ist und das vom Zeitselektor ausgewählte Array leer ist, bedeutet dies, dass der Benutzer keinen Inhalt eingegeben hat. Daher fordern wir den Benutzer auf, vor dem Filtern Inhalt einzugeben. let isEmpty = this.topData.every((item)=>{
Rückgabewert (Artikel.Inhalt == "") und (Artikel.OptionArr.Länge == 0) und (Artikel.ZeitArr.Länge == 0)
})
wenn(istEmpty == wahr){
this.$alert('Bitte geben Sie den Inhalt vor dem Filtern ein', 'Filtertipps', {
confirmButtonText: 'Bestätigen'
});
}anders{
// Parameter sammeln und Filteranforderungen senden. Hier müssen wir sie nach Typ klassifizieren, den nicht leeren Benutzereingabeinhalt zur Datenfilterung im Array speichern und dann die Anforderung an das Backend senden.
dies.topData.forEach((item)=>{
wenn(Artikel.Typ == 1){
wenn(item.content != ""){
let filterItem = {
Feld:Element.WortTitel,
Wert:Element.Inhalt
}
this.apiFilterArr.push(filterItem)
}
}sonst wenn(Artikel.Typ == 2){
wenn(item.optionArr.length > 0){
let filterItem = {
Feld:Element.WortTitel,
Wert: item.optionArr
}
this.apiFilterArr.push(filterItem)
}
}sonst wenn(Artikel.Typ == 3){
wenn(item.timeArr.length > 0){
let filterItem = {
Feld:Element.WortTitel,
Wert:Element.timeArr
}
this.apiFilterArr.push(filterItem)
}
}
})
//Setze den gefilterten Inhalt in ein Array und übergebe es an das Backend (die Parameter müssen natürlich nicht unbedingt in das Array gesetzt werden)
// Die konkrete Form der Übergabe an das Backend kann im Detail besprochen werden console.log("Sende Anfrage mit gefiltertem Inhalt", this.apiFilterArr);
}
},
// Beim Zurücksetzen werden die Filterelemente der ursprünglichen Konfiguration entfernt und den entsprechenden beiden Arrays zugewiesen resetFilter() {
dies.topData = JSON.parse(sessionStorage.getItem("topData"))
dies.bottomData = JSON.parse(sessionStorage.getItem("bottomData"))
},
},
};
</Skript>
<style lang="less" scoped>
.filterBtn {
Breite: 114px;
Höhe: 40px;
.filterMaskOne {
oben: 0;
links: 0;
Position: fest;
Breite: 100 %;
Höhe: 100%;
Z-Index: 999;
Hintergrundfarbe: rgba(0, 0, 0, 0,3);
.filterMaskOneContent {
Position: absolut;
oben: 152px;
rechts: 38px;
Breite: 344px;
Höhe: 371px;
Hintergrundfarbe: #fff;
Kastenschatten: 0px 0px 4px 3px rgba (194, 194, 194, 0,25);
Rahmenradius: 4px;
.filterHeader {
Breite: 344px;
Höhe: 48px;
Rahmen unten: 1px durchgezogen #e9e9e9;
Spanne {
Anzeige: Inline-Block;
Schriftstärke: 600;
Schriftgröße: 16px;
Rand links: 24px;
Rand oben: 16px;
}
}
.filterBody {
Breite: 344px;
Höhe: 275px;
Überlauf-y: automatisch;
Überlauf-x: versteckt;
Box-Größe: Rahmenbox;
Polsterung: 12px 24px 0 24px;
.outPrompt {
Farbe: #666;
}
.filterBodyCondition {
Breite: 100 %;
Mindesthöhe: 40px;
Anzeige: Flex;
Rand unten: 14px;
.linkslinks {
Breite: 88px;
Höhe: 40px;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Rand rechts: 20px;
Spanne {
Position: relativ;
Schriftgröße: 14px;
Farbe: #333;
ich {
Farbe: #666;
rechts: -8px;
oben: -8px;
Position: absolut;
Schriftgröße: 15px;
Cursor: Zeiger;
}
i:schweben {
Farbe: #5f95f7;
}
}
}
.rechtsrechts {
Breite: berechnet (100 % – 70 Pixel);
Höhe: 100%;
/tief/ Eingabe::Platzhalter {
Farbe: rgba(0, 0, 0, 0,25);
Schriftgröße: 13px;
}
/deep/ .el-input__inner {
Höhe: 40px;
Zeilenhöhe: 40px;
}
/deep/ .el-select {
.el-input--suffix {
/tief/ Eingabe::Platzhalter {
Farbe: rgba(0, 0, 0, 0,25);
Schriftgröße: 13px;
}
.el-input__inner {
Rand: keiner;
}
.el-input__inner:hover {
Hintergrund: rgba (95, 149, 247, 0,05);
}
}
}
.el-Datumseditor {
Breite: 100 %;
Schriftgröße: 12px;
}
.el-range-editor.el-input__inner {
Polsterung links: 2px;
Polsterung rechts: 0;
}
/deep/.el-range-input {
Schriftgröße: 13px !wichtig;
}
/deep/ .el-range-separator {
Polsterung: 0 !wichtig;
Schriftgröße: 12px !wichtig;
Breite: 8 % !wichtig;
Rand: 0;
}
/tief/ .el-range__close-icon {
Breite: 16px;
}
}
}
}
.filterFooter {
Breite: 344px;
Höhe: 48px;
Anzeige: Flex;
Inhalt ausrichten: Abstand dazwischen;
Elemente ausrichten: zentrieren;
Box-Größe: Rahmenbox;
Polsterung links: 24px;
Polsterung rechts: 12px;
Rahmen oben: 1px durchgezogen #e9e9e9;
.filterBtn {
.filterMaskTwo {
Position: fest;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 100%;
Hintergrundfarbe: rgba(0, 0, 0, 0,3);
Z-Index: 1000;
.filterMaskContentTwo {
Breite: 240px;
Höhe: 320px;
Hintergrund: #ffffff;
Kastenschatten: 0px 0px 4px 3px rgba (194, 194, 194, 0,25);
Rahmenradius: 4px;
Position: absolut;
oben: 360px;
rechts: 180px;
Überlauf-y: automatisch;
Box-Größe: Rahmenbox;
Polsterung: 12px 0 18px 0;
Überlauf-x: versteckt;
.innerPrompt {
Farbe: #666;
Breite: 100 %;
Polsterung links: 20px;
Rand oben: 12px;
}
.contentTwoItem {
Breite: 100 %;
Höhe: 36px;
Zeilenhöhe: 36px;
Schriftgröße: 14px;
Farbe: #333333;
Cursor: Zeiger;
.mingzi {
Breite: 100 %;
Höhe: 36px;
Box-Größe: Rahmenbox;
Polsterung links: 18px;
}
}
.contentTwoItem:hover {
Hintergrund: rgba (95, 149, 247, 0,05);
}
}
}
}
}
}
}
}
// Steuern Sie die Ein- und Ausblendeffekte.fade-enter-active,
.fade-leave-active {
Übergang: Deckkraft 0,3 s;
}
.ausblenden-eingeben,
.fade-verlassen-zu {
Deckkraft: 0;
}
</Stil>
ZusammenfassenWorauf Sie hierbei achten müssen, ist, dass beim Hinein- und Herausbewegen der Maus das entsprechende kleine Löschsymbol angezeigt wird. Das ist ungefähr die Idee. Es ist nicht einfach, Code zu schreiben, also lasst uns zusammenarbeiten. Oben sind die Details, wie Vue die Ele.me-Benutzeroberfläche verwendet, um die Filterfunktion von Teambition zu imitieren. Weitere Informationen zur Nachahmung der Filterfunktion von Teambition durch Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Ein einfaches Beispiel für die MySQL-Suche nach Daten im Umkreis von N Kilometern
Artikel empfehlen
CSS-Eingabe[Typ=Datei]-Stilverschönerung (Eingabe-Upload-Dateistil)
Wirkung: <!doctype html> <html> <K...
Detaillierte Erläuterung der Fallstricke von DTS, die durch die Zeitstempel- und Datums-/Uhrzeitzonenprobleme in MySQL verursacht werden
Inhaltsverzeichnis Wie wird die aktuelle Uhrzeit ...
So erstellen Sie eine TAR-Datei von WSL über Docker
Ich habe kürzlich mit der Remote-Entwicklungsfunk...
Wissen Sie, wie man Mock in einem Vue-Projekt verwendet?
Inhaltsverzeichnis Erster Schritt: Der zweite Sch...
So implementieren Sie die Unschärfefunktion von DIV
Verwenden Sie Anti-Shake, um DIV verschwinden zu ...
Beispiele für die Verwendung von React Ref
Inhaltsverzeichnis Was ist ref So verwenden Sie r...
So führen Sie ein Projekt mit Docker aus
1. Geben Sie das Verzeichnis ein, in dem Ihr Proj...
Wir zeigen Ihnen einen Trick, um einen Textvergleich unter Linux durchzuführen
Vorwort Während des Schreibens des Codes werden w...
Die letzten zwei Jahre mit User Experience
<br />Es ist nicht länger als zwei Jahre her...
JavaScript implementiert Farberkennung beim Überfahren der Tabellenzeile mit der Maus
In diesem Artikel erfahren Sie, wie Sie mit JavaS...
Optimierung der Datenbank-SQL-Anweisung
Warum optimieren: Beim Start des eigentlichen Pro...
Mysql GTID Mha-Konfigurationsmethode
Gtid + Mha + Binlog-Serverkonfiguration: 1: Testu...
Auszeichnungssprache - CSS-Stile für Text festlegen
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Better-Scroll realisiert den Effekt der Verknüpfung von Menü und Inhalt
1. Grundlegende Verwendung <!DOCTYPE html> ...
Toolkit: Ein leistungsfähigeres Front-End-Framework als Bootstrap
Hinweis: Die derzeit beliebtesten Front-End-Frame...