<template>
   <div class="inputbox">
      <input type="text" v-model="index"><div class="btn" style="" @click="changeIndex('-')">-</div><div class="btn" @click="changeIndex('+')" >+</div>
   </div>
</template>

<script>
export default {
props:['number'],
model:{
  prop:'number',
  event:'changeinput'
},
watch: {  // 利用侦听器 实现自定义组件的双向绑定
    number: {
      handler (vls) {
        this.index = vls
      },
      // 强制立即执行回调
      immediate: true

    },
    index(index){
        this.$emit('changeinput',index)
    }
  },
data(){
    return {
        index:0
    }
},
methods:{
    changeIndex(str){
        if(str=='-'){
            if(this.index==0)return
            this.index--
        }else{
            this.index++
        }
       
    }
}
}
</script>

<style lang="scss" scoped>
.inputbox{
    border: 1px solid #999;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    padding-left: 5px;
    input{
        border: none;
        outline: none;
         flex: 1;
         width: 100%;
    }
    .btn{
        height: 40px;
        width: 40px;
        line-height: 40px;
        text-align: center;
        color: #999;
        border-left:1px solid #999;
        cursor: pointer;
        
    }
}
</style>