vue mui数量加减

templete:
<div class="sum_cont">
    <label class="minute" @click="editCart('minu',item)">-</label>
    <input class="input" v-model="item.productNum"  />
    <label class="add" @click="editCart('add',item)">+</label>
  </div>
----------------------
script:
editCart(flag, item) {
        // eslint-disable-next-line eqeqeq
        if (flag == 'add') { // 添加商品数量
          item.productNum++
        // eslint-disable-next-line eqeqeq
        } else if (flag == 'minu') { // 减少商品数量
          if (item.productNum <= 1) {
            return
          }
          item.productNum--
        } else { // 商品控制选中
          // eslint-disable-next-line eqeqeq
          item.checked = (item.checked == '1') ? '0' : '1'
        }
        this.axios.post('/users/cartEdit', {
          productId: item.productId,
          productNum: item.productNum,
          checked: item.checked
        }).then((response) => {
          let res = response.data
          console.log(res)
        })
      },
-----------------------------------
style:

/* 总数量*/
.sum_cont {
  z-index:200;
  position: absolute;
  right: 0;
  bottom: 10px;
  width: 130px;
  height: 20px;
  line-height: 20px;
}
/*减号*/
.minute {
  position: absolute;
  width: 20px;
  text-align: center;
  height: 20px;
  line-height: 20px;
  left: 20px;
  font-size: 18px;
  border: 1px solid #DD524D;
}
/*加号*/
.add {
  width: 20px;
  border: 1px solid #DD524D;
  height: 20px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  right: 10px;
  font-size: 18px;
}
/*文本框*/
.input {
  width: 40px;
  height: 21px;
  display: inline-block;
  line-height: 20px;
  text-align: center;
  position: absolute;
  right: 40px;
}

在这里插入图片描述
-不能小于1

<label>选择数量</label>
<div class="mui-numbox" data-numbox-step="1" data-numbox-min="1" style="margin:0px 0px 0px 15px;">
	<!-- "-"按钮,点击可减小当前数值 -->
	<button class="mui-btn mui-numbox-btn-minus" type="button" id="btn_minus">-</button>
	<input class="mui-numbox-input" type="number" id="commodityQuality" name="commodityQuality" v-model="commodityQuality" />
	<!-- "+"按钮,点击可增大当前数值 -->
	<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值