基于element的区间选择器

需求

公司项目对于产品价格在新增时加区间限制

思路

限制

1. 皆为正整数
2. 左侧必须大于1，右侧(暂时)无限大，右侧的值必须不小于左侧的值
3. 必填校验

<el-form-item
	label="产品价格范围"
    class="priceFormItem"
    prop="prodBegin"
>
	<el-input
		v-model="ruleForm.prodBegin"
        class="priceInput"
        style="width: 130px; margin-right: 30px"
	/>-<el-input
		v-model="ruleForm.prodEnd"
        class="priceInput"
        ref="prodEnd"
        style="width: 130px; margin-left: 30px"
	/>
</el-form-item>

页面使用了elementUI组件

加上限制

 const validateCom = (rule, value, callback) => {
	let prodEndNum = this.$refs.prodEnd.value;
	if (!isComplexMoney(value) || !isComplexMoney(prodEndNum)) {
		callback(new Error('请输入正确格式的金额'));
	} else if (value >= prodEndNum) {
        callback(new Error(`最大值输入值必须大于${value}`));
    } else if (value.length > 7 || prodEndNum.length > 7) {
        callback(new Error('输入值不能超过6位')); //包含小数点位数
    } else if ((value + '').indexOf('.') == -1 && value.length > 6) {
        callback(new Error('输入最小值不能超过6位')); //不包含小数点位数
    } else if ((prodEndNum + '').indexOf('.') == -1 && prodEndNum.length > 6) {
        callback(new Error('输入最大值不能超过6位')); //不包含小数点位数
    } else {
        callback();
    }
};
rules: {
	prodBegin: [{ validator: validateCom, trigger: 'blur' }],
},

以上满足对于价格的限制
let prodEndNum = this.$refs.prodEnd.value;即获取到左侧input值进行对比