笨方法实现数量的输入与加一减一 、以及对边界值的判断禁用

 

如图:

 

 

复制代码
data(){
return {
   prodNum: 1//计数器数量
      prohibit1: false,  //计数器-是否禁用
      prohibit2: false,  //计数器+是否禁用
}


函数:
//
笨方法实现数量的输入与加一减一 // 以及对边界值的判断禁用 /** * 减少商品数量 */ reduce () { var prodNum = parseInt(this.prodNum) if (prodNum == 1) { this.prohibit1 = true //禁用 } else { this.prodNum = prodNum - 1 this.judgeInput() } }, /* * 失去焦点时对输入框的判断 */ judgeInput (e) { var prodNum = this.prodNum if (prodNum.length == 0 || prodNum == 0) { this.prodNum = 1 } else if (prodNum > this.prodInfo.totalStocks) { this.$message({ message: '限购' + this.prodInfo.totalStocks + '件', type: 'warning', duration: 1000 }); this.prodNum = this.prodInfo.totalStocks this.prohibit1 = false this.prohibit2 = true //禁用 } else { this.prodNum = prodNum this.prohibit2 = false //禁用 } }, /** * 增加商品数量 */ increase () { var prodNum = this.prodNum // 判断是否限购 if (this.prodInfo.totalStocks) { if (prodNum < this.prodInfo.totalStocks) { this.prodNum = parseInt(prodNum) + 1 this.prohibit2 = false //禁用 } else { this.$message({ message: '限购' + this.prodInfo.totalStocks + '件', type: 'warning', duration: 1000 }); this.prohibit2 = true //禁用 this.prodNum = this.prodInfo.totalStocks } } else { return } this.prohibit1 = false },
复制代码

 

复制代码
html:

<
div class="items"> <span class="tit">数量</span> <div class="con"> <div class="goods-number" onselectstart="return false"> <span :class="['reduce', this.prohibit1?'limit':'']" @click="reduce">-</span> <input type="number" class="number" v-model="prodNum" oninput="value=value.replace(/[^\d]/g,'')" @blur="judgeInput" /> <span :class="['increase', this.prohibit2?'limit':'']" @click="increase">+</span> </div> </div> </div>
复制代码

 

复制代码
.items .con .goods-number {
    height: 30px;
}

.items .con .goods-number .reduce,
.items .con .goods-number .increase {
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    background: #e9e9e9;
    font-size: 22px;
    text-align: center;
    line-height: 26px;
    color: #999;
    cursor: pointer;
}

.items .con .goods-number .limit {
    cursor: not-allowed;
    color: #ccc;
    background: rgb(246, 246, 246, .7);
}

.items .con .goods-number .number {
    border: 0;
    width: 50px;
    height: 30px;
    text-align: center;
    font-family: arial;
    vertical-align: top;
    /* background: rgb(245, 245, 245, .4); */
}
复制代码

 

posted @   yoona-lin  阅读(234)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示