NumberBox组件内容：
<template>
<div class="number-box" :class="{'box-disable': isDisabled}">
<!-- 此处为“减号”标志的图片 -->
<img class="btn-number" src="./reduce.png" @click="onReduce" />
<div class="number-container">
<Input v-model="strVal" @on-enter="onEnter" :disabled="isDisabled" @on-blur="onBlur" placeholeder="请输入范围" />
<div class="unit" v-text="米" />
</div>
<img class="btn-number" src="./recrease.png" @click="onIncrease" />
</div>
</template> <script>
export default {
props: {
isDisabled: {
type: Boolean,
default: false
},
curVal: {
type: Number,
default: 50
},
minVal: {
type: Number,
default: 50
},
maxVal: {
type: Number,
default: 1000
}
},
data() {
return {
numVal: this.curVal,
strVal: this.curVal.toString()
}
},
methods: {
onEnter() {
if(Number(this.strVal) <= this.minVal) {
this.strVal = this.minVal.toString();
this.numVal = this.minVal;
}
if(Number(this.strVal) >= this.maxVal) {
this.strVal = this.maxVal.toString();
this.numVal = this.maxVal;
} this.numVal = Number(this.strVal);
this.$emit("getNumber", this.numVal);
},
onBlur() {
this.nextTick(() => {
this.onEnter();
});
},
onReduce() {
if(Number(this.strVal) > this.minVal) {
this.strVal = Number(this.strVal);
this.numVal -= 1;
this.strVal = this.numVal.toString();
this.$emit("getNumber", this.numVal);
}
},
onIncrease() {
if(Number(this.strVal) < this.maxVal) {
this.strVal = Number(this.strVal);
this.numVal += 1;
this.strVal = this.numVal.toString();
this.$emit("getNumber", this.numVal);
}
},
resetCurVal(val) {
this.strVal = val.toString();
this.numVal = val;
this.$emit("getNumber", this.numVal);
}
}
}
</script> <style lang="less" scoped>
/*数字输入框*/
.box-disable {
pointer-events: none;
color: #686868 !important;
}
.number-box {
color: #FFF;
dispaly: felx;
flex-flow: row nowrap;
justify-content: space-between;
.btn-number {
cursor: pointer;
margin-top: 7px;
width: 15px;
height: 15px;
}
.number-container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
flex-grow: 1;
margin: 0 10px;
background: #1F2124;
.unit {
position: absolute;
right: 35px;
}
}
}
</style>
以下为引用number-box.vue组件的index.vue内容：
<template>
<div class="main-container">
<div class="" @click="onBackOff">
</div>
<number-box ref="numRange" :curVal="currentVal" :minVal="50" :maxVal=“1000” @getNumber="getNumber" />
</div>
</template>
<script>
export default {
data() {
return {
currentVal: 30
}
},
methods: {
onBackOff() { //重置子组件输入框中的内容
this.$refs.numRange.resetCurVal(50);
},
getNumber(val) {
console.log("This is value of input ", val);
}
}
}
</script>