vue写购物车点击加减数量，计步器组件

1.可以直接复制代码使用，count.vue组件代码

<template>
    <div class="count">
        <span class="reduce" @click="reduce"></span>
        <input type="number" v-model="num" @change="change">
        <span class="plus" @click="plus"></span>
    </div>
</template>

<script>
    export default {
        name: "count",
        data(){
            return {
                num:''
            }
        },
        props:{
            value:{
                type:Number,
                default:1
            },
            min:{
                type:Number,
                default:1
            },
            max:{
                type:Number,
                default:10
            }
        },
        created(){
            this.inspect();
        },
        methods:{
            reduce(){
                if(this.num>this.min){
                    this.num--;
                    this.$emit('input', this.num);
                }
            },
            plus(){
                if(this.num<this.max){
                    this.num++;
                    this.$emit('input', this.num);
                }
            },
            change(){
                if(this.num>this.max)this.num=this.max;
                if(this.num<this.min)this.num=this.min;
            },
            inspect(){
                //判断用户传递的传递的初始值是否合规
                if(this.value>this.max){
                    this.num =this.max
                }else if(this.value<this.min){
                    this.num =this.min
                }else {
                    this.num =this.value
                }
            }
        },
        watch: {
            value(newVal) {
                this.num = newVal
            }
        }
    }
</script>

<style scoped>
    .count span{
        display: inline-block;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        width: 30px;
        height: 30px;
        color: #999;
        vertical-align: middle;
        background: #ebedf0;
        border-radius: 2px;
    }
    .count span:after{
        content: '';
        position: absolute;
        top: calc((100% - 2px) / 2);
        left: 25%;
        background-color: #c9c9c9;
        width: 50%;
        height: 2px;
    }
    .count .plus:before{
        content: '';
        width: 2px;
        height: 50%;
        position: absolute;
        left: calc((100% - 2px) / 2);
        top: 25%;
        background-color: #c9c9c9;
    }
    .count input{
        display: inline-block;
        width: 40px;
        height: 30px;
        border: none;
        box-sizing: border-box;
        vertical-align: middle;
        text-align: center;
        background: #ebedf0;
        margin: 0 1px;
        font-size: 13px;
        color: #6A6A6A;
    }
</style>

2.调用方式

<template>
    <div class="pbody">

        <count v-for="item in listInfo" v-model="item.shopCount" :key="item.id"></count>


    </div>
</template>

<script>
    import count from 'comp/count.vue'
    export default {
        name: "placeAnOrder",
        components:{
            count
        },
        data(){
            return {
                value:1,
                listInfo:[
                    {id:1,shopCount:1},
                    {id:2,shopCount:1},
                    {id:3,shopCount:1},
                    {id:4,shopCount:1},
                    {id:5,shopCount:1},
                ]
            }
        },
    }
</script>

3.最终效果