caimei-applets-hehe/components/cm-module/cm-cart-product/number-box.vue

<template>
    <view class="number-box">
        <view class="sub iconfont icon-jianhao" @click="sub"></view>
        <input class="number" type="number" v-model="number" @blur="blur" />
        <view class="add iconfont icon-jiahao" @click="add"></view>
    </view>
</template>

<script>
export default {
    name: 'number-box',
    data() {
        return {
            number: 0
        }
    },
    props: {
        value: {
            type: Number,
            default: 0
        }
    },
    created() {
        this.number = this.value
    },
    watch:{
        value(val){
            this.number = val
        }
    },
    methods: {
        add() {
            this.number++
            this.$emit('change', this.number)
        },
        sub() {
            if (this.number > 1) {
                this.number--
                this.$emit('change', this.number)
            } else {
                this.$util.msg('购买数量不能少于1', 2000)
            }
        },
        blur() {
            if (this.number <= 0) {
                this.number = 1
                this.$util.msg('购买数量不能少于1', 2000)
            }
            this.number = parseInt(this.number)
            this.$emit('change', this.number)
        }
    }
}
</script>

<style lang="scss" scoped>
.number-box {
    width: 148rpx;
    height: 48rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 24rpx;
    border: 1rpx solid #e1e1e1;
    .sub,
    .add {
        flex: 1;
        text-align: center;
        font-size: 28rpx;
        color: #ccc;
    }
    .number {
        text-align: center;
        width: 56rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
        box-sizing: border-box;
        border-right: 1rpx solid #e1e1e1;
        border-left: 1rpx solid #e1e1e1;
    }
}
</style>