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>