요소를 기반으로 간격 선택 컴포넌트를 생성하는 방법 소개

이 기사에서는 요소를 기반으로 간격 선택 구성 요소를 만드는 방법을 소개합니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

회사 시스템에서 제품 관리자는 특정 필드에 간격 임계값을 설정하거나 설계 중에 필터링 조건으로 사용하도록 요구하는 경우가 많습니다. 그런데 요소에 별로 적합한 컴포넌트가 없어서(슬라이더 컴포넌트는 양쪽 끝 설정을 지원하지 않습니다) 제가 직접 만들어봤습니다.

Achievements

최종 표시 효과는 다음과 같습니다.

Requirements

프로젝트 요구 사항을 예로 들면 기본 요구 사항은 다음과 같습니다.

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는 거부 상태이고 catch되지 않았음을 의미합니다. 그 이유는 값을 변경하고 전체 양식을 검증할 때 변경된 입력을 두 번 검증하게 되어 예외가 발생하기 때문입니다.
2. 마지막으로 다음과 같이 수정합니다.

   rrreee

   Summary

type=number가 설정된 경우에도 입력 양식 출력 값은 문자열 유형입니다.

관련 항목은 다음과 같아야 합니다. 연결 확인 중에 확인되며 반복적으로 확인할 수 없습니다

관련 권장 사항:

🎜🎜jQuery 선택 요소 사용 소개🎜🎜🎜🎜🎜VUE 영역 선택기(V-Distpicker) 구성 요소 사용 소개🎜🎜

위 내용은 요소를 기반으로 간격 선택 컴포넌트를 생성하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!