VUE中一个修改商品数量的组件

商品数量修改

VUE中使用

<counting
	:disabled="" // 是否禁用
	:numbers="" // 商品数量
	:stockNum="" // 商品库存
	:maxNum="" // 最大购买值
	:minNum="" // 最小购买值
	@changeNumber="changeNumber($event, v1.id)" // 改变数量后的方法
/>

组件

<template>
	<div :class="{ counting: true, disabled }">
		<div class="reduce" @click="changNum2('-')">
			-
			<div class="tip">
				<div class="triangle" />
				{{ "最少需购买" + minNum + "个商品" }}
			</div>
		</div>
		<div class="input_box">
			<div class="wrap" v-if="disabled" />
			<input
				type="text"
				v-model="numObj.num"
				@blur="changNum2('input')"
				@keyup="amountKeydownFun"
			/>
		</div>
		<div class="add" @click="changNum2('+')">
			+
			<div class="tip" v-if="maxNum">
				<div class="triangle" />
				{{ "最多可购买" + maxNum + "个商品" }}
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: "counting",
  props: {
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 显示数字
    numbers: {
      type: Number | String,
      default: 0
    },
    // 最大
    maxNum: {
      type: Number | String,
      default: 0
    },
    // 最小
    minNum: {
      type: Number | String,
      default: 0
    },
    // 库存
    stockNum: {
      type: Number | String,
      default: 0
    }
  },
  data() {
    return {
      numObj: {
        num: 0,
        type: ""
      }
    };
  },
  watch: {
    numbers: {
      deep: true,
      immediate: true,
      handler: function(newV) {
        this.numObj.num = parseInt(newV);
      }
    }
  },
  methods: {
    amountKeydownFun() {
      if (this.numObj.num.length == 1) {
        this.numObj.num = this.numObj.num.toString().replace(/[^1-9]/g, "");
      } else {
        this.numObj.num = this.numObj.num.toString().replace(/\D/g, "");
      }
    },
    changNum2(type) {
      if (this.disabled) return;
      // 点击加号或者减号
      if (type == "+" || type == "-") {
        this.numObj.type = "btn";
        // +
        if (type == "+") {
          this.numObj.num++;
          // 如果存在最大购买值
          if (this.maxNum) {
            // 存在最大购买值并且最大购买值 >= 库存，则等于库存
            if (
              this.maxNum >= this.stockNum &&
              (this.numObj.num >= this.stockNum ||
                this.numObj.num > this.maxNum)
            ) {
              this.numObj.num = this.stockNum;
              // 存在最大购买值并且最大购买值 < 库存，则等于最大购买
            } else if (this.numObj.num >= this.maxNum) {
              this.numObj.num = this.maxNum;
            }
            // 不存在最大购买值
          } else {
            if (this.stockNum >= 999 && this.numObj.num >= 999) {
              this.numObj.num = 999;
              // 如果库存没有超过999，最大值为库存
            } else if (this.numObj.num >= this.stockNum) {
              this.numObj.num = this.stockNum;
            }
          }
        }
        // -
        if (type == "-") {
          this.numObj.num--;
          // 如果有最大购买
          if (this.maxNum && this.maxNum < this.stockNum) {
            if (this.numObj.num > this.maxNum) {
              this.numObj.num = this.maxNum;
            }
          } else {
            if (this.numObj.num > this.stockNum) {
              this.numObj.num = this.stockNum;
            }
          }
          // 如果存在最小购买值
          if (this.minNum) {
            if (this.numObj.num < this.minNum) {
              this.numObj.num = this.minNum;
            }
          } else {
            if (this.numObj.num < 1) {
              this.numObj.num = 1;
            }
          }
        }
      }
      // 输入框输入
      if (type == "input") {
        this.numObj.type = "input";
        if (this.numObj.num.toString().indexOf(".") != -1) {
          let idx = this.numObj.num.toString().indexOf(".");
          this.numObj.num = Number(this.numObj.num.toString().slice(0, idx));
        }
        if (this.maxNum) {
          if (this.maxNum > this.stockNum) {
            if (this.numObj.num >= this.stockNum) {
              this.numObj.num = this.stockNum;
            }
          } else {
            if (this.numObj.num >= this.maxNum) {
              this.numObj.num = this.maxNum;
            }
          }
        } else {
          if (this.stockNum >= 999 && this.numObj.num >= 999) {
            this.numObj.num = 999;
            // 如果库存没有超过999，最大值为库存
          } else if (this.numObj.num >= this.stockNum) {
            this.numObj.num = this.stockNum;
          }
        }
        if (this.minNum) {
          if (this.numObj.num <= this.minNum) {
            this.numObj.num = this.minNum;
          }
        } else {
          if (this.numObj.num <= 1) {
            this.numObj.num = 1;
          }
        }
      }
      this.$emit("changeNumber", this.numObj);
    }
  }
};
</script>

<style lang="scss" scoped>
	.counting {
	  width: 92px;
	  height: 24px;
	  border: 1px solid #EBEDF0;
	  border-radius: 2px;
	  user-select: none;
	  display: inline-block;
	  &.disabled{
	    border: 1px solid #F7F8F9;
	    .reduce {
	      border-right: 1px solid #F7F8F9;
	      color: #ADADAE;
	    }
	    .input_box {
	      color: #ADADAE;
	      input {
	        color: #ADADAE;
	      }
	    }
	    .add {
	      border-left: 1px solid #F7F8F9;
	      color: #ADADAE;
	    }
	  }
	  div {
	    float: left;
	    box-sizing: border-box;
	    text-align: center;
	    line-height: 24px;
	    height: 24px;
	  }
	  .reduce {
	    width: 24px;
	    border-right: 1px solid #EBEDF0;
	    font-size: 14px;
	    color: #444;
	    text-align: center;
	    font-weight: 400;
	    cursor: pointer;
	  }
	  .input_box {
	    width: calc(100% - 24px - 24px);
	    position: relative;
	    .wrap {
	      position: absolute;
	      top: 0;
	      bottom: 0;
	      left: 0;
	      right: 0;
	      background: rgba(255, 255, 255, 0.4);
	    }
	    input {
	      border: 0;
	      width: 100%;
	      height: 100%;
	      line-height: 24px;
	      font-size: 14px;
	      color: #323233;
	      text-align: center;
	      font-weight: 400;
	      /*添加css样式*/
	      &::-webkit-outer-spin-button,
	      &::-webkit-inner-spin-button {
	          -webkit-appearance: none;
	      }
	      &[type="number"] {
	          -moz-appearance: textfield;
	      }
	    }
	  }
	  .add {
	    width: 24px;
	    border-left: 1px solid #EBEDF0;
	    font-size: 14px;
	    color: #444;
	    text-align: center;
	    font-weight: 400;
	    cursor: pointer;
	  }
	  .add,.reduce {
	    position: relative;
	    &:hover {
	      .tip {
	        display: block;
	      }
	    }
	    .tip {
	      display: none;
	      position: absolute;
	      height: auto;
	      top: 33px;
	      left: 50%;
	      transform: translateX(-50%);
	      -webkit-transform: translateX(-50%);
	      background: #303133;
	      color: #FFF;
	      padding: 3px 10px;
	      font-size: 12px;
	      border-radius: 4px;
	      white-space: nowrap;
	      z-index: 91;
	      .triangle {
	        position: absolute;
	        left: 50%;
	        transform: translateX(-50%);
	        -webkit-transform: translateX(-50%);
	        top: -15px;
	        width: 0;
	        height: 0;
	        border: 8px solid #303133;
	        border-right: 8px solid rgba(255, 255, 255, 0);
	        border-left: 8px solid rgba(255, 255, 255, 0);
	        border-top: 8px solid rgba(255, 255, 255, 0);
	      }
	    }
	  }
	}
</style>