CommunityApp/pagesM/comps/dt_accumulator.vue

<template>
  <view class="dt-accumulator">
    <view class="plus-btn" @tap="tapPlus(-1)">-</view>
    <input type="number" :value="val" @input="onInput" @blur="onBlur" class="input-box" />
    <view class="plus-btn" @tap="tapPlus(1)">+</view>
  </view>
</template>
<script>
export default {
  props:{
    isFocus:{
      type: Boolean,
      default: false
    },
    val:{
      type: Number,
      default: 1
    }
  },
  methods:{
    onBlur(e){
      let val = parseInt(e.detail.value)
      this.$emit('update:isFocus',false)
      this.$emit('change', val)
      // this.$emit('update:isFocus',false)
    },
    onInput(e){
      this.$emit('update:isFocus',true)
    },
    tapPlus(delta){
      if(this.isFocus) return 

      let val = parseInt(this.val) + delta
      this.$emit('change', val)
    }
  },
}
</script>

<style lang="scss" scoped>
.dt-accumulator{
  display: flex;
  align-items: center;
  width: 200upx;
  height: 50upx;
  box-sizing: border-box;
  border:1upx solid #E5E5E5;
  border-radius:6upx;

  .plus-btn{
    width:60upx;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size:40upx;
    line-height: 42rpx;
  }
  .input-box{
    flex:1;
    height:100%;
    padding:0 10upx;
    text-align: center;
    border-left:1upx solid #e5e5e5;
    border-right:1upx solid #e5e5e5;
  }
}

</style>