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,'')"
/>
<i
v-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.效果图