Introduction à la méthode de création d'un composant de sélection d'intervalle basé sur l'élément

Cet article vous présente la méthode de création d'un composant de sélection d'intervalle basé sur un élément. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans le système de l'entreprise, les chefs de produit exigent souvent qu'un certain champ soit défini sur un seuil d'intervalle ou utilisé comme condition de filtrage lors de la conception. Mais comme il n'y a pas de composant très approprié dans element (le composant slider ne prend pas en charge la définition des deux extrémités), j'en ai construit un moi-même.

Réalisations

L'effet d'affichage final est le suivant :

Exigences

En prenant les exigences du projet comme exemple, les exigences de base sont les suivantes :

1. est divisé en valeurs gauche et droite, y compris les valeurs gauche et droite, des entiers positifs

2. Le côté gauche doit être supérieur ou égal à 1, le côté droit ne doit pas être supérieur à 100000, la valeur du côté droit ne doit pas être inférieure à celle du côté gauche

3. Par défaut : 20 à gauche, 100000 à droite, les deux sont obligatoires

4. Vérification floue

Les structures de vérification de page et de formulaire sont les mêmes :

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

Idée principale

1. Vérification de formulaire unique : vérification d'élément requis, vérification d'entier positif, vérification d'intervalle

2. Vérification d'association : le seuil droit ne doit pas être inférieur au seuil gauche

Selon l'idée ci-dessus, la vérification d'un seul formulaire appartient au méthode de vérification publique, et la vérification associée doit être vérifiée séparément (car les objets de comparaison sont différents et les invites sont différentes), donc dans Les définitions suivantes sont incluses dans la vérification de définition :

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' },
    ],
},

Vérification publique méthodes : vérification d'entier positif, vérification d'intervalle

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('输入值必须为正整数'));
},

Remarque : l'entrée-sortie est toujours de type chaîne et doit être convertie en nombre avant la comparaison

Vérification d'association :

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

Probablement, penserez-vous, n'est-ce pas la fin ! si facile ! Maintenant, les vrais pièges commencent

Remplissage des fosses (points clés)

Selon l'écriture ci-dessus, les fonctions de base du composant sont réalisées, mais il y a un piège ! Comme suit :

Évidemment, la valeur de gauche est inférieure à la valeur de droite, mais l'invite de vérification signale toujours une erreur. La raison est toujours un problème de vérification d'association. Puisqu’il s’agit d’une vérification associée, lorsque l’un d’eux est modifié, les deux doivent être revérifiés. C'est très simple. Lorsque l'entrée change, ne serait-il pas acceptable de revérifier le formulaire

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

Les performances réelles sont comme nous l'espérions, mais lorsque nous ouvrirons la console, nous verrons Uncaught (in promise) false, qui encore une fois Bon sang, en tant qu'excellent ingénieur front-end, vous n'autoriserez jamais que des erreurs soient signalées dans votre code, même si cela n'affecte pas le processus normal.

Après vérification : Promise a signalé une erreur et Uncaught signifie qu'il existe un état de rejet qui n'a pas été détecté. La raison en est que lorsqu'une valeur est modifiée et que l'ensemble du formulaire est vérifié, l'entrée modifiée sera vérifiée deux fois, provoquant une exception.

Enfin, apportez les modifications suivantes :

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();
},

Résumé

1. La valeur de sortie du formulaire de saisie est de type String, même si type=number

   est défini

2. Les éléments associés doivent être vérifiés lors de la vérification de l'association, et la vérification ne peut pas être répétée

Recommandations associées :

Pour jQuery Introduction à l'utilisation de l'élément sélecteur

Introduction à l'utilisation du composant sélecteur de région VUE (V-Distpicker)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!