使用：
placeholderMin="最小值"
placeholderMax="最大值"
clearable
v-model="contractCost">
</ec-input-range>
实现：
<div class="ec-input-range">
<el-input
v-model="val.min"
@input="val.min=val.min.replace(/[^\d]/g,' ')"
@blur="handleVal"
:placeholder="placeholderMin"
></el-input>
<div class="ec-input-range-divider"></div>
<el-input
v-model="val.max"
@input="val.max=val.max.replace(/[^\d]/g,' ')"
@blur="handleVal"
:placeholder="placeholderMax"
></el-input>
</div>
</template>
<script>
export default {
name: "EcInputRange",
data() {
return {
val: {
min: '',
max: '',
},
};
},
props: {
placeholderMin: {
type: String,
default: "请输入",
},
placeholderMax: {
type: String,
default: "请输入",
},
},
model: {
prop: "val",
event: "input",
},
methods: {
handleVal() {
const _this = this;
if (_this.val.min == "" || _this.val.min == undefined || _this.val.min == null ||
_this.val.max == "" || _this.val.max == undefined || _this.val.max == null) {
_this.$emit("input", _this.val);
} else {
if (Number(_this.val.min) >= Number(_this.val.max)) {
_this.$message({
type: 'warning',
message: '区间最小值需要小于最大值!',
onClose: function () {
_this.val.min = '';
_this.val.max = '';
}
});
return
}
_this.$emit("input", _this.val);
}
},
},
};
</script>
<style lang="scss" scoped>
.ec-input-range-divider {
display: inline-block;
width: 7px;
height: 1px;
background: #c0c4cc;
margin-bottom: 4px;
}
</style>
