Vue Input输入框两侧加减框内数字组件

Posted 2021-01-15 minozmin

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>