<style scoped>
.icon-size {
    font-size: 20px;
}
.number {
    width: 60px;
    text-align: center;
}
</style>
<template>
    <div>
                    <i class="iconfont iconminus icon-size" @click="minusClick"></i>
                    <span class="number">{{value}}</span>
                    <i class="iconfont iconplus icon-size" @click="plusClick"></i>
    </div>
</template>
<script>
export default {
    props: {
        min: {
            default: undefined,
        },
        max: {
            default: undefined,
        },
        defaultValue: {
            require: true,
            default: 0,
        },
        step: {
            default: 1,
        },
    },
    data() {
        return {
            value: this.defaultValue
        }
    },
    methods: {
        minusClick() {
            if(this.min === undefined || this.value > this.min) {
                this.value-= this.step
                this.$emit('input', this.value)
            }
        },
        plusClick() {
            if(this.max === undefined || this.value < this.max) {
                this.value+= this.step
                this.$emit('input', this.value)
            }
        }
    },
}
</script>