步进器

<template>
    <div>
        <div class="d2">
            <button class="d3" @click="jiansi" :disabled="numes == 1">-</button>
            <input class="d4" v-model="v" @blur="blur" />
            <button class="d5" @click="jiajia" :disabled="numes === 10">+</button>

        </div>
    </div>
</template>
<script>
export default {
    props: {
        numes: {
            type: Number
        },
    },
    data() {
        return {
            v: 0,
        }
    },
    created() {
        this.v = this.numes
        //  因为没有用组件的双向绑定 所以把父组件传过来的值在这个组件里面定义一个变量接收一下
    },
    methods: {
        jiajia() {
           
            if(this.v>10){
                this.v=10
            }else{
                this.v++
            }
            // 如果数量大于10 就让他等于10 反之不管
            // 然后把这个值发送到父组件让他接收
            this.$emit('jiaba')
        },
        jiansi() {
            if(this.v<1){
                this.v=1
            }else{
                this.v--
            }
           
            // 如果数量小于0 就让他等于0 反之不管
            // 然后把这个值发送到父组件让他接收
            this.$emit('jianba')
        },
        blur(e) {
            // 失去焦点判断输入框的值是否属于数字 不是就等于0 是的话判断数量是否合理 ，再取个整发送到父组件
            this.v = !Number(this.v.trim()) ? 1 : this.v
            this.v = this.v > 10 ? 10 : this.v
            this.v = this.v < 1 ? 1 : this.v
            this.v = Math.round(this.v)
            this.$emit('blur', this.v)
        }
    }
}
</script>
<style scoped lang="scss">
$r: 37.5;

.d2 {
    float: right;
    margin-right: 10rem/$r;
    line-height: 50rem/$r;
    display: flex;
    margin-top: 15rem/$r;

    .d3 {
        width: 20rem/$r;
        height: 20rem / $r;
        background-color: #F7F8FA;
        line-height: 20rem/$r;
        outline: none;
        border: none;
        text-align: center;
        color: #ccc;
        margin-right: 5rem/$r;
    }

    .d4 {
        width: 30rem/$r;
        height: 20rem / $r;
        background-color: #F7F8FA;
        font-size: 12rem/$r;
        line-height: 10rem/$r;
        outline: none;
        border: none;
        text-align: center;
        color: #ccc;
        margin-right: 5rem/$r;



    }

    .d5 {
        line-height: 20rem/$r;
        width: 20rem/$r;
        height: 20rem / $r;
        background-color: #F7F8FA;
        outline: none;
        border: none;
        text-align: center;
        color: #ccc;
        margin-right: 10rem/$r;
    }
}
</style>

用法

css布局样式
 <div class="footer1">
                        <div class="d1">购买数量{{ numbers }}</div>
                        <bujinqi @blur="blur" @jiaba=" numbers++" @jianba="numbers < 1 ? 1 : numbers--"
                            :numes="numbers"></bujinqi>
                    </div>
                    
                     data() {
        return {
        
            numbers: 1,
            isande: false,
            
            nums: 0
        }
    },
    methods: {
        blur(num) {
            this.numbers = num
        },
                    
                    
                   

第二个
 <bujinqi @blur="blur" @jiaba=" jia(item)" @jianba="jian(item)" :numes="item.num" class="zyn3">
                        </bujinqi>
                         blur(num) {
            this.numbers = num
        },
        jia(item) {
            this.$http.post('cartedit', {
                id: item.id,
                type: 2
            }).then((res) => {
                console.log(item.num);
                item.num++
                this.sudu()
            })
        },
        jian(item) {

            this.$http.post('cartedit', {
                id: item.id,
                type: 1
            }).then((res) => {
                console.log(res);
                item.num < 1 ? 1 : item.numbers--
                this.sudu()
            })


        },
        
        
         numbers: 1,