vue基于element的区间选择组件
|
公司的系统中，产品经理在设计时经常要求对某个字段进行区间阈值设置或者作为筛选条件。但是苦于element中没有非常契合的组件（slider组件并不支持两端均能设定），于是自己动手造了一个。 成果最终的展示效果如下：
需求这里以项目的需求为例，基本的需求如下：
页面和表单校验结构一样： ~主要思路
根据上面的思路，单个表单的校验属于公共校验方法，关联校验需要分别校验（因为对比对象不同，且提示语不同），由此在自定义校验中有了如下定义： 公共校验方法：正整数校验、区间校验 MAX_NUMBER) {
return callback(new Error(`输入值必须小于${MAX_NUMBER}`));
}
return callback();
}
return callback(new Error('输入值必须为正整数'));
},
注意：input输出的始终是字符串类型，需要转换成数字后进行比对 关联校验： min) {
return callback();
}
return callback(new Error('输入值不得小于最小阈值'));
},
大概，你会想，这不就完了吗！so easy！现在真正的坑才开始 填坑（重点）
很显然，左侧值是小于右侧值的，但是校验提示仍然报错。究其原因，还是关联校验的问题。既然是关联交验，改变其中一个时应该会重新校验两个。很简单，在input改变时，重新校验表单不就OK了吗 真实表现正如我们所料，但是当我们打开console的时候，会看到 经查证：Promise报错，Uncaught的意思是代表有reject状态没有被catch。究其原因，改变一个值时，校验整个表单时，改变的那个input会执行两次校验，导致异常。 最后做如下修改： {
ret.valid = valid;
ret.form = this.form;
});
return ret;
},resetForm() {
this.$refs.form.resetFields();
},
总结input表单输出值为String类型，即使设置了 全部代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
