Einführung in die Methode zum Erstellen einer Intervallauswahlkomponente basierend auf Elementen

Dieser Artikel bietet Ihnen eine Einführung in die Methode zur Erstellung einer Intervallauswahlkomponente auf Basis von Elementen. Ich hoffe, dass er Ihnen als Referenz dienen wird.

Im System des Unternehmens verlangen Produktmanager häufig, dass ein bestimmtes Feld auf einen Intervallschwellenwert eingestellt oder während des Entwurfs als Filterbedingung verwendet wird. Allerdings gab es im Element keine sehr geeignete Komponente (die Schieberkomponente unterstützte das Festlegen beider Enden nicht), also habe ich selbst eine gebaut.

Erfolge

Der endgültige Anzeigeeffekt ist wie folgt:

Anforderungen

Am Beispiel der Projektanforderungen lauten die Grundanforderungen wie folgt:

1. ist in linke und rechte Werte unterteilt, einschließlich linker und rechter Werte, positive ganze Zahlen

2. Die linke Seite muss größer oder gleich 1 sein, die rechte Seite darf nicht größer als 100000 sein und der Wert der rechten Seite darf nicht kleiner als der Wert der linken Seite sein

3. Standard: 20 auf der linken Seite, 100000 auf der rechten Seite, beide erforderlich

4. Überprüfung der Unschärfe

Die Seiten- und Formularüberprüfungsstrukturen sind die gleichen:

<el-form>
    <el-form-item>
        <el-input></el-input>
    </el-form-item>
    ~
    <el-form-item>
        <el-input></el-input>
    </el-form-item>
</el-form>

Hauptidee

1. Einzelformularüberprüfung: erforderliche Elementüberprüfung, positive Ganzzahlüberprüfung, Intervallüberprüfung

2. Assoziationsüberprüfung: Der rechte Schwellenwert darf nicht kleiner sein als der linke Schwellenwert

Gemäß der obigen Idee gehört die Überprüfung eines einzelnen Formulars zur Öffentlichkeit Die Überprüfungsmethode und die zugehörige Überprüfung müssen separat überprüft werden (da die Vergleichsobjekte unterschiedlich sind und die Eingabeaufforderungen unterschiedlich sind). In der benutzerdefinierten Überprüfung sind die folgenden Definitionen in der Überprüfung enthalten:

rules: {
    min: [
        { required: true, message: '必填项，请维护', trigger: 'blur' },
        { validator: this.validateCom, trigger: 'blur' },
        { validator: this.validateMin, trigger: 'blur' },
    ],
    max: [
        { required: true, message: '必填项，请维护', trigger: 'blur' },
        { validator: this.validateCom, trigger: 'blur' },
        { validator: this.validateMax, trigger: 'blur' },
    ],
},

Öffentliche Überprüfungsmethoden : positive Ganzzahlüberprüfung, Intervallüberprüfung

validateCom(rule, value, callback) {
    const one = Number(value);
    if (Number.isInteger(one)) {
        if (one  MAX_NUMBER) {
            return callback(new Error(`输入值必须小于${MAX_NUMBER}`));
        }
        return callback();
    }
    return callback(new Error('输入值必须为正整数'));
},

Hinweis: Die Eingabeausgabe ist immer ein Zeichenfolgentyp, muss zum Vergleich in Zahlen umgewandelt werden

Assoziationsüberprüfung:

validateMin(rule, value, callback) {
    const one = Number(value);
    const max = Number(this.form.max);
    if (!max || one  min) {
        return callback();
    }
    return callback(new Error('输入值不得小于最小阈值'));
},

Wahrscheinlich, werden Sie denken, ist das nicht das Ende! so einfach! Jetzt beginnen die eigentlichen Fallstricke

Die Lücken füllen (Schlüsselpunkte)

Gemäß der obigen Beschreibung sind die Grundfunktionen der Komponente realisiert, aber es gibt eine Falle ! Wie folgt:

Offensichtlich ist der Wert links kleiner als der Wert rechts, aber die Überprüfungsaufforderung meldet immer noch einen Fehler. Der Grund ist immer noch ein Problem der Assoziationsüberprüfung. Da es sich um eine zugehörige Verifizierung handelt, sollten beide erneut verifiziert werden, wenn eine davon geändert wird. Es ist ganz einfach. Wäre es nicht in Ordnung, das Formular erneut zu überprüfen?

handleChange() {
    this.$refs.form.validate();
}

Die tatsächliche Leistung ist wie erwartet, aber wenn wir die Konsole öffnen, werden wir Uncaught (in promise) false sehen , was ist das? Verdammt, als exzellenter Front-End-Ingenieur werden Sie niemals zulassen, dass Fehler in Ihrem Code gemeldet werden, auch wenn dies den normalen Prozess nicht beeinträchtigt.

Nach der Überprüfung: Promise meldet einen Fehler und Uncaught bedeutet, dass ein Ablehnungsstatus vorliegt, der nicht abgefangen wurde. Der Grund dafür ist, dass, wenn ein Wert geändert wird und das gesamte Formular überprüft wird, die geänderte Eingabe zweimal überprüft wird, was zu einer Ausnahme führt.

Nehmen Sie abschließend die folgenden Änderungen vor:

handleMinChange() {
    this.$refs.form.validateField('max');
},
handleMaxChange() {
    this.$refs.form.validateField('min');
},

// 并对外暴露操作方法
getFormData() {
    const ret = {};
    this.$refs.form.validate((valid) => {
        ret.valid = valid;
        ret.form = this.form;
    });
    return ret;
},
resetForm() {
    this.$refs.form.resetFields();
},

Zusammenfassung

1. Der Ausgabewert des Eingabeformulars ist vom Typ String, auch wenn type=number

2. Die zugehörigen Elemente müssen während der Zuordnungsüberprüfung überprüft werden und die Überprüfung kann nicht wiederholt werden

Verwandte Empfehlungen:

jQuery-Selektor Einführung in die Elementverwendung

Einführung in die Verwendung der VUE-Region-Selektor-Komponente (V-Distpicker)

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Erstellen einer Intervallauswahlkomponente basierend auf Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!