1.自定义组件inputNumber.js

<template><el-col :span="width" class="col-wrap"><label class="col-label">累计消费金额</label><div:class="`ys-input-range el-range-editor el-range-editor--mini el-input__inner ${isActive ? 'is-active' : ''}`"><input:type="type"class="el-range-input"autocomplete="off"v-model="fst"placeholder="起始值(≤)"@change="onChange"@focus="onFstFocus"@blur="onFstBlur"onkeyup="value=value.replace(/[^\d.]/g,'')"/><span class="el-range-separator">-</span><input:type="type"class="el-range-input"autocomplete="off"v-model="snd"placeholder="(≤)终止值"@change="onChange"@focus="onSndFocus"@blur="onSndBlur"onkeyup="value=value.replace(/[^\d.]/g,'')"/><iv-show="fst || fst === 0 || snd || snd === 0"class="el-input__icon el-range__close-icon el-icon-circle-close"@click="onClear"/></div></el-col></template><script>export default {props: {value: {required: false,},type: {type: String,},clearable: {type: Boolean,default: true,},width: {type: Number,default: 5,},},watch: {value: {handler(val) {let fst = null;let snd = null;if (Array.isArray(val)) {fst = val[0];snd = val[1];} else {fst = val;}this.fst = fst;this.snd = snd;},immediate: true,},},data() {return {fst: null,snd: null,fstFocus: false,sndFocus: false,hover: false,};},computed: {isActive() {return this.fstFocus || this.sndFocus;},},methods: {onChange() {let val;if (!this.fst && !this.snd) {val = "";} else {val = [this.fst, this.snd];}this.$emit("input", val);},onFstFocus() {this.fstFocus = true;},onFstBlur() {this.fstFocus = false;},onSndFocus() {this.sndFocus = true;},onSndBlur() {this.sndFocus = false;},onClear() {this.fst = null;this.snd = null;this.onChange();},},};</script><style lang="scss">.ys-input-range {display: flex !important;flex-flow: row nowrap;justify-content: stretch;align-items: center;.el-range-input {width: 48%;height: 100%;border: 0;flex: auto;text-align: center;&::placeholder {color: rgb(192, 196, 204);}}input {border: 0; // 去除未选中状态边框outline: none; // 去除选中状态边框background-color: rgba(0, 0, 0, 0); // 透明背景}}.col-wrap {display: flex;align-items: center;margin-bottom: 10px;.col-label {width: 70px;text-align: right;font-size: 14px;margin-right: 10px;border-radius: 20px;}}</style>

2.使用

<inputtotalAmt v-model="defaultQueryData.totalAmt" />

3.效果图

如果觉得《自定义数值范围选择组件》对你有帮助，请点赞、收藏，并留下你的观点哦！