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

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

<script>
export default {
    name: 'number-box',
    data() {
        return {
            count: 1
        }
    },
    model: {
        prop: 'value',
        event: 'input'
    },
    props: {
        value: {
            type: Number,
            default: 0
        },
		defaultVal: {
			type:Number,
			default: 0
		},
        max: {
            type: Number,
            default: 99999999
        },
        min: {
            type: Number,
            default: 1
        }
    },
    watch: {
        count(nVal){
			this.count = parseInt(nVal)
        },
		defaultVal(nVal){
			this.count = nVal
		}
    },
    created() {
      this.count = this.defaultVal  
    },
    methods: {
        add() {
            if (this.count === this.max) {
                return this.$util.msg(`购买数量不能大于${this.max}`, 2000)
            }
            this.count++
            this.$emit('input', this.count)
			this.$emit('change', this.count)
        },
        sub() {
            if (this.count === this.min) {
                return this.$util.msg(`购买数量不能少于${this.min}`, 2000)
            }
            this.count--
            this.$emit('input', this.count)
			this.$emit('change', this.count)
        },
        blur() {
            if (this.count > this.max) {
                this.count = this.max
                return this.$util.msg(`购买数量不能大于${this.max}`, 2000)
            }
            if (this.count < this.min) {
                this.count = this.min
                return this.$util.msg(`购买数量不能少于${this.min}`, 2000)
            }
            this.$emit('input', this.count)
			this.$emit('change', this.count)
        }
    }
}
</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>