Element基于el-input数字范围输入框怎么实现
本文小编为大家详细介绍“Element基于el-input数字范围输入框怎么实现”，内容详细，步骤清晰，细节处理妥当，希望这篇“Element基于el-input数字范围输入框怎么实现”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
数字范围组件
在做筛选时可能会出现数字范围的筛选，例如：价格、面积，但是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数字范围输入框怎么实现”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论