基于el-input的数字范围输入框

数字范围组件

在做筛选时可能会出现数字范围的筛选，例如：价格、面积，但是elementUI本身没有自带的数字范围组件，于是进行了简单的封装，不足可自行进行优化

满足功能：

1. 最小值与最大值的相关约束，当最大值存在，最小值大于最大值且失焦，自动将最小值赋值为最大值，反之亦然。
2. 拥有el-input组件本身的属性绑定以及方法
3. 可设置精度，默认精度为0
4. 可使用el-input插槽，但需要加前缀start-，end-进行区分

<numberRange :startValue.sync="startValue" :endValue.sync="endValue" />

相关代码：

<template><div class="input-number-range" :class="{ 'is-disabled': disabled }"><div class="flex"><el-inputref="inputFromRef"clearablev-model="startValue":disabled="disabled":placeholder="startPlaceholder"@blur="handleBlurFrom"@focus="handleFocusFrom"@input="handleInputFrom"@change="handleInputChangeFrom"v-bind="$attrs"v-on="$listeners"><template v-for="(value, name) in startSlots" #[name]="slotData"><slot :name="name" v-bind="slotData || {}"></slot></template></el-input><div class="center"><span>至</span></div><el-inputref="inputToRef"clearablev-model="endValue":disabled="disabled":placeholder="endPlaceholder"@blur="handleBlurTo"@focus="handleFocusTo"@input="handleInputTo"@change="handleInputChangeTo"v-bind="$attrs"v-on="$listeners"><template v-for="(value, name) in endSlots" #[name]="slotData"><slot :name="name" v-bind="slotData || {}"></slot></template></el-input></div></div>
</template><script>
export default {name: "InputNumberRange",props: {// inputs: {//   type: Array,//   required: true,//   default: () => [null, null],// },startValue: {type: Number || String,default: null,},endValue: {typeof: Number || String,default: null,},// 是否禁用disabled: {type: Boolean,default: false,},startPlaceholder: {type: String,default: "最小值",},endPlaceholder: {type: String,default: "最大值",},// 精度参数precision: {type: Number,default: 0,validator(val) {return val >= 0 && val === parseInt(val, 10);},},},data() {return {};},computed: {startSlots() {const slots = {};Object.keys(this.$slots).forEach((name) => {if (name.startsWith("start-")) {const newKey = name.replace(/^start-/, "");slots[newKey] = this.$slots[name];}});return slots;},endSlots() {const slots = {};Object.keys(this.$slots).forEach((name) => {if (name.startsWith("end-")) {const newKey = name.replace(/^end-/, "");slots[newKey] = this.$slots[name];}});return slots;},},watch: {},methods: {handleInputFrom(value) {this.$emit("update:startValue", value);},handleInputTo(value) {this.$emit("update:endValue", value);},// from输入框change事件handleInputChangeFrom(value) {// 如果是非数字空返回nullif (value == "" || isNaN(value)) {this.$emit("update:startValue", null);return;}// 初始化数字精度const newStartValue = this.setPrecisionValue(value);// 如果from > to 将from值替换成toif (typeof newStartValue === "number" &&parseFloat(newStartValue) > parseFloat(this.endValue)) {this.startValue = this.endValue;} else {this.startValue = newStartValue;}if (this.startValue !== value) {this.$emit("update:startValue", this.startValue);}},// to输入框change事件handleInputChangeTo(value) {// 如果是非数字空返回nullif (value == "" || isNaN(value)) {this.$emit("update:endValue", null);return;}// 初始化数字精度const newEndValue = this.setPrecisionValue(value);// 如果from > to 将from值替换成toif (typeof newEndValue === "number" &&parseFloat(newEndValue) < parseFloat(this.startValue)) {this.endValue = this.startValue;} else {this.endValue = newEndValue;}if (this.endValue !== value) {this.$emit("update:endValue", this.endValue);}},handleBlurFrom(event) {this.$emit("blur-from", event);},handleFocusFrom(event) {this.$emit("focus-from", event);},handleBlurTo(event) {this.$emit("blur-to", event);},handleFocusTo(event) {this.$emit("focus-to", event);},// 根据精度保留数字toPrecision(num, precision) {if (precision === undefined) precision = 0;return parseFloat(Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision));},// 设置精度setPrecisionValue(value) {if (this.precision === undefined) return value;return this.toPrecision(parseFloat(value), this.precision);},},
};
</script><style lang="scss" scoped>
// 取消element原有的input框样式
::v-deep .el-input__inner {border: 0px;margin: 0;padding: 0 15px;background-color: transparent;
}
.input-number-range {background-color: #fff;border: 1px solid #dcdfe6;border-radius: 4px;
}
.flex {display: flex;flex-direction: row;width: 100%;height: auto;justify-content: center;align-items: center;.center {margin-top: 1px;}
}
.is-disabled {background-color: #f5f7fa;border-color: #e4e7ed;color: #c0c4cc;cursor: not-allowed;
}
</style>