基于el-input封装的输入框区间

效果

        

使用方法

// numberArr:['','']
<InputNumberRange v-model="numberArr"></InputNumberRange>

完整代码        

<template>
	<div>
		<div class="input-number-range"
			 :class="{ 'is-disabled': disabled }">
			<div class="flex">
				<div class="from">
					<el-input ref="input_from"
							  v-model="userInputForm"
							  :disabled="disabled"
							  :placeholder="startPlaceholder"
							  :size="size"
							  :style="{width:inputWid+'px'}"
							  @blur="handleBlurFrom"
							  @focus="handleFocusFrom"
							  @input="handleInputFrom"
							  @change="handleInputChangeFrom"></el-input>
				</div>
				<div class="center">
					<span>{{rangeSeparator}}</span>
				</div>
				<div class="to">
					<el-input ref="input_to"
							  v-model="userInputTo"
							  :disabled="disabled"
							  :size="size"
							  :style="{width:inputWid+'px'}"
							  :placeholder='endPlaceholder'
							  @blur="handleBlurTo"
							  @focus="handleFocusTo"
							  @input="handleInputTo"
							  @change="handleInputChangeTo"></el-input>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
    name: 'InputNumberRange',

    props: {
        // 初始化范围
        value: {
            required: true,
            type: Array,
            default: () => [],
        },

        // 是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        size: {
            type: String,
            default: 'mini',
        },
        startPlaceholder: {
            type: String,
            default: '最小值',
        },
        endPlaceholder: {
            type: String,
            default: '最大值',
        },
        rangeSeparator: {
            type: String,
            default: '-',
        },
        width: {
            type: [Number, String],
            default: 180,
        },
        // 最小值
        min: {
            type: Number,
            default: 0,
        },
        // 最大值
        max: {
            type: Number,
            default: 0,
        },

        // 精度参数
        precision: {
            type: Number,
            default: 0,
            validator(val) {
                return val >= 0 && val === parseInt(val, 10);
            },
        },
    },

    data() {
        return {
            userInputForm: null,
            userInputTo: null,
            inputWid: 90,
        };
    },

    watch: {
        value: {
            immediate: true,
            handler(v) {
                // 初始化范围
                if (v instanceof Array && this.precision !== undefined) {
                    this.userInputForm = typeof v[0] === 'number' ? v[0] : null;
                    this.userInputTo = typeof v[1] === 'number' ? v[1] : null;
                }
            },
        },
    },
    created() {
        this.inputWid = (Number(this.width) - 16) / 2;
    },

    methods: {
        // 根据精度保留数字
        toPrecision(num, precision) {
            if (precision === undefined) precision = 0;
            return parseFloat(
                Math.round(num * Math.pow(10, precision)) /
                    Math.pow(10, precision)
            );
        },

        handleBlurFrom(event) {
            this.$emit('blurfrom', event);
        },

        handleFocusFrom(event) {
            this.$emit('focusfrom', event);
        },

        handleBlurTo(event) {
            this.$emit('blurto', event);
        },

        handleFocusTo(event) {
            this.$emit('focusto', event);
        },

        handleInputFrom(v) {
            this.$emit('inputfrom', v);
        },

        handleInputTo(v) {
            this.$emit('inputto', v);
        },

        // from输入框change事件
        handleInputChangeFrom(v) {
            // 如果是非数字空返回null
            if (isNaN(v) || v === '' || v < 0) {
                this.$emit('input', [null, this.userInputTo]);
                this.$emit('changefrom', this.userInputForm);
                return;
            }

            // 初始化数字精度
            this.userInputForm = this.setPrecisionValue(v);
            if (this.min && this.userInputForm < this.min) {
                this.userInputForm = this.min;
            }
            if (this.max && this.userInputForm > this.max) {
                this.userInputForm = this.max;
            }
            this.$emit('input', [this.userInputForm, this.userInputTo]);
            this.$emit('changefrom', this.userInputForm);
        },

        // to输入框change事件
        handleInputChangeTo(v) {
            // 如果是非数字空返回null
            if (isNaN(v) || v === '' || v < 0) {
                this.$emit('input', [this.userInputForm, null]);
                this.$emit('changefrom', this.userInputTo);
                return;
            }

            // 初始化数字精度
            this.userInputTo = this.setPrecisionValue(v);

            if (this.min && this.userInputTo < this.min) {
                this.userInputTo = this.min;
            }
            if (this.max && this.userInputTo > this.max) {
                this.userInputTo = this.max;
            }
            this.$emit('input', [this.userInputForm, this.userInputTo]);
            this.$emit('changeto', this.userInputTo);
        },

        // 设置成精度数字
        setPrecisionValue(v) {
            if (this.precision !== undefined) {
                const val = this.toPrecision(v, this.precision);
                return val;
            }
            return null;
        },
    },
};
</script>
<style lang="scss" scoped>
// 取消element原有的input框样式
.el-input {
    /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;
    height: 32px;
    margin-top: 4px;
    .flex {
        height: 32px;
        line-height: 32px;
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        align-items: center;
        .center {
            width: 16px;
        }
    }
}
.is-disabled {
    background-color: #eef0f6;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed;
}
</style>