一个增加与减少的两端的按钮

<view class="right">
                        <view class="m-numSelector">
                            <view @tap="onCountMinus" class="minus" :data-scindex="scIndex" :data-index="index"></view>
                            <input type="number" :value="prod.prodCount" disabled></input>
                            <view @tap="onCountPlus" class="plus" :data-scindex="scIndex" :data-index="index"></view>
                        </view>
                    </view>

/* 加减框 */

.m-numSelector .minus, .m-numSelector input, .m-numSelector .plus {
  float: left;
  box-sizing: border-box;
  height: 40rpx;
  border: 2rpx solid #d9d9d9;
}

.m-numSelector {
  float: right;
}

.m-numSelector .minus, .m-numSelector .plus {
  position: relative;
   40rpx;
}
/* 去除相邻的样式 */
.m-numSelector .minus {
  border-right: 0;
  border-top-left-radius: 4rpx;
  border-bottom-left-radius: 4rpx;
}

.m-numSelector input {
   40rpx;
  text-align: center;
  color: #333;
  font-size: 24rpx;
}
/* 去除相邻的样式 */
.m-numSelector .plus {
  border-left: 0;
  border-top-right-radius: 4rpx;
  border-bottom-right-radius: 4rpx;
}

.m-numSelector .minus::before, .m-numSelector .plus::before,
.m-numSelector .plus::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: ' ';
   22rpx;
  height: 3rpx;
  background-color: #7f7f7f;
}

.m-numSelector .plus::after {
  transform: rotate(90deg);
}

.m-numSelector:not(.disabled) .minus:not(.disabled):active,
.m-numSelector:not(.disabled) .plus:not(.disabled):active {
  background-color: #f4f4f4;
}

具体样式再调整

后续再增加相关的判断与递增递减函数