基於element造一個區間選擇組件方法介紹

這篇文章帶給大家的內容是關於基於element造一個區間選擇元件方法介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

公司的系統中，產品經理在設計時經常要求對某個欄位進行區間閾值設定或作為篩選條件。但苦於element中沒有非常契合的元件（slider元件並不支援兩端皆能設定），於是自己動手造了一個。

成果

最終的展示效果如下：

需求

#這裡以項目的需求為例，基本的需求如下：

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

注意：input輸出的始終是字串類型，需要轉換成數字後進行比對

關聯校驗：

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

大概，你會想，這不就完了嗎！ so easy！ 現在真正的坑才開始

填坑（重點）

根據上面的寫法，元件的基本功能實現了，但是有一個坑！如下：

很顯然，左邊值是小於右邊值的，但是校驗提示仍然報錯。究其原因，還是關聯校驗的問題。既然是關聯交驗，改變其中一個時應該會重新校驗兩個。很簡單，在input改變時，重新校驗表單不就OK了嗎

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

真實表現正如我們所料，但是當我們打開console的時候，會看到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

2. 關聯交驗時需要驗證其關聯項，且無法重複校驗

相關推薦：

#對jQuery選擇器element用法介紹

關於VUE-地區選擇器(V-Distpicker)元件的使用介紹

以上是基於element造一個區間選擇組件方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！