数字范围组件
在做筛选时可能会出现数字范围的筛选，例如：价格、面积，但是elementUI本身没有自带的数字范围组件，于是进行了简单的封装，不足可自行进行优化
满足功能：
- 最小值与最大值的相关约束，当最大值存在，最小值大于最大值且失焦，自动将最小值赋值为最大值，反之亦然。
- 拥有el-input组件本身的属性绑定以及方法
- 可设置精度，默认精度为0
- 可使用
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-input
ref="inputFromRef"
clearable
v-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-input
ref="inputToRef"
clearable
v-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) {
// 如果是非数字空返回null
if (value == "" || isNaN(value)) {
this.$emit("update:startValue", null);
return;
}
// 初始化数字精度
const newStartValue = this.setPrecisionValue(value);
// 如果from > to 将from值替换成to
if (
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) {
// 如果是非数字空返回null
if (value == "" || isNaN(value)) {
this.$emit("update:endValue", null);
return;
}
// 初始化数字精度
const newEndValue = this.setPrecisionValue(value);
// 如果from > to 将from值替换成to
if (
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>到此这篇关于 Element基于el-input数字范围输入框的实现的文章就介绍到这了,更多相关 Element el-input输入框内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
