caimei-applets-store/components/views/cm-number-box/cm-number-box.vue

<template>
    <view class="number-box">
        <view class="sub" @click="onSub" :class="{ disabled: subDisabled }"></view>
        <input type="number" class="control-input" :value="value" @input="onInput" />
        <view class="add" @click="onAdd" :class="{ disabled: addDisabled }"></view>
    </view>
</template>

<script>
export default {
    model: {
        prop: 'value',
        event: 'input'
    },
    props: {
        min: {
            type: Number,
            default: 1
        },
        max: {
            type: Number,
            default: 99999
        },
        value: {
            type: Number,
            default: 1
        }
    },
    computed: {
        addDisabled() {
            return this.value === this.max
        },
        subDisabled() {
            return this.value === this.min
        }
    },
    watch: {
        value(nval) {
            console.log(nval)
        }
    },
    methods: {
        // 减法
        onSub() {
            if (this.subDisabled) return
            let inputValue = this.value
            if (inputValue <= this.min) {
                inputValue = this.min
            } else {
                inputValue--
            }
            this.$emit('input', inputValue)
            this.$emit('change', inputValue)
        },
        // 加法
        onAdd() {
            if (this.addDisabled) return
            let inputValue = this.value
            if (inputValue >= this.max) {
                inputValue = this.max
            } else {
                inputValue++
            }
            this.$emit('input', inputValue)
            this.$emit('change', inputValue)
        },
        // 失去焦点
        onInput(e) {
            let inputValue = parseInt(e.detail.value)
            if (isNaN(inputValue)) {
                inputValue = this.min
            }
            if (inputValue < this.min) {
                inputValue = this.min
            } else if (inputValue > this.max) {
                inputValue = this.max
            }
            this.$emit('input', inputValue)
            this.$emit('change', inputValue)
        }
    }
}
</script>

<style lang="scss" scoped>
.number-box {
    width: 148rpx;
    height: 50rpx;
    border: 1rpx solid #e1e1e1;
    border-radius: 25rpx;
    @extend .cm-flex-between;

    .add,
    .sub {
        @extend .cm-flex-center;
        flex: 1;
        font-size: 24rpx;
        color: #666666;

        &.disabled {
            color: #cccccc;
        }
    }

    .add {
        &::before {
            margin-bottom: 2rpx;
            content: '+';
        }
    }

    .sub {
        &::before {
            margin-bottom: 2rpx;
            content: '-';
        }
    }

    .control-input {
        width: 56rpx;
        height: 48rpx;
        border-right: 1rpx solid #e1e1e1;
        border-left: 1rpx solid #e1e1e1;
        background-color: #f7f7f7;
        box-sizing: border-box;
        text-align: center;
        font-size: 26rpx;
        color: #333;
    }
}
</style>