<!--输入数字组件-->
<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>