要素に基づいて間隔選択コンポーネントを作成する方法の紹介

この記事では、要素に基づいて間隔選択コンポーネントを作成する方法を紹介します。必要な方は参考にしていただければ幸いです。

会社のシステムでは、プロダクト マネージャーが、設計中に特定のフィールドを間隔のしきい値に設定するか、フィルター条件として使用することを要求することがよくあります。ただし、要素にあまり適当なコンポーネントがなかったので（スライダーコンポーネントは両端の設定をサポートしていませんでした）、自分で作成しました。

実績

最終的な表示効果は次のとおりです:

要件

ここでは、プロジェクト要件を例として取り上げます:

1. 左と左に分かれています。右の値 (左と右の値を含む)、正の整数

2. 左辺は 1 以上である必要があり、右辺は 100000 以下であり、右辺の値は左辺より小さくてはなりません

3. デフォルト: 左側に 20、右側に 100000、両方必要です

4. 焦点ぼけ補正検証

ページとフォームの検証構造は同じです:

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

主なアイデア

1. 単一フォームの検証: 必須項目の検証、正の整数の検証、間隔の検証

2. 関連する検証: 右の側のしきい値が左のしきい値より小さくてはなりません

上記の考えによると、単一フォームの検証は属しますパブリック検証メソッドに追加され、関連する検証は個別に検証する必要があるため (比較オブジェクトが異なり、プロンプトが異なるため)、次の定義が定義検証に含まれます:

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

パブリック検証メソッド: 正の整数検証、間隔検証

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

注: 入力出力は常に文字列型であり、比較のために数値に変換する必要があります

関連付け検証:

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

おそらく、これで終わりではないかと思われるでしょう。とても簡単！ ここからが本当の落とし穴です

落とし穴（キーポイント）を埋める

上記の記述によれば、コンポーネントの基本的な機能は実現されていますが、落とし穴があります！次のようになります。

明らかに、左側の値は右側の値より小さいですが、検証プロンプトでは依然としてエラーが報告されます。その理由はやはり関連付けの検証の問題です。関連付け検証なので、どちらかを変更した場合は両方とも再検証する必要があります。非常に簡単です。入力が変更されたときに、フォームを再検証すればよいのではないでしょうか。

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

実際のパフォーマンスは予想どおりですが、コンソールを開くと、Uncaught (in promise) と表示されます。 ) false、これは一体どういうことなのでしょうか? 優秀なフロントエンド エンジニアであれば、たとえ通常のプロセスに影響を及ぼさなかったとしても、コード内でエラーが報告されることは決して許可されません。 Uncaught (in promise) false，这又是什么鬼，身为优秀的前端工程师，你定不会允许自己的代码里报错，即使不影响正常流程。

经查证：Promise报错，Uncaught的意思是代表有reject状态没有被catch。究其原因，改变一个值时，校验整个表单时，改变的那个input会执行两次校验，导致异常。

最后做如下修改：

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

总结

1. input表单输出值为String类型，即使设置了type=number

   検証後: Promise はエラーを報告し、Uncaught は拒否状態にあり、捕捉されていないことを意味します。その理由は、値が変更されてフォーム全体が検証されると、変更された入力が 2 回検証され、例外が発生するためです。
2. 最後に次の変更を加えます:

   rrreee

   概要

type=number が設定されている場合でも、入力フォームの出力値は String 型です

関連する項目は関連付けの検証中に検証され、繰り返し検証することはできません

関連する推奨事項:

🎜🎜jQuery セレクター要素の使用方法の概要🎜🎜🎜🎜🎜VUE 領域セレクター (V-Distpicker) コンポーネントの使用方法の概要🎜🎜

以上が要素に基づいて間隔選択コンポーネントを作成する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。