再引用number-box组件时，使用过程中根据业务需要，数值的增加比如商城需要考虑实时库存？虽然在列表中增加max库存数，但根据业务需要使用的时增加数量先查询库存的业务，因此就需要动态控制数量值！
只需要做一个小小的优化就可以了！
组件原文件：
-
+
export default {
name: 'uni-number-box',
props: {
value: {
type: Number,
default: 0
},
min: {
type: Number,
default: -Infinity
},
max: {
type: Number,
default: Infinity
},
step: {
type: Number,
default: 1
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
inputValue: this.value
}
},
computed: {
disableSubtract() {
return this.value <= this.min
},
disableAdd() {
return this.value >= this.max
}
},
watch: {
value(val) {
this.inputValue = val;
},
inputValue(val) {
this.$emit('change', val);
}
},
methods: {
_calcValue(type) {
const scale = this._getDecimalScale();
let value = this.inputValue * scale;
let step = this.step * scale;
if (type === 'subtract') {
value -= step
} else if (type === 'add') {
value += step
}
if (value < this.min || value > this.max) {
return
}
this.inputValue = value / scale;
},
_getDecimalScale() {
let scale = 1;
// 浮点型
if (~~this.step !== this.step) {
scale = Math.pow(10, (this.step + '').split('.')[1].length);
}
return scale;
},
_onBlur(event) {
let value = event.detail.value;
if (!value) {
this.inputValue = 0;
return
}
value = +value;
if (value > this.max) {
value = this.max;
} else if (value < this.min) {
value = this.min
}
this.inputValue = value
}
}
}
.uni-numbox {
display: flex;
flex-direction: row;
justify-content: flex-start;
height: 70upx;
}
.uni-numbox-minus,
.uni-numbox-plus {
margin: 0;
background-color: #f9f9f9;
width: 80upx;
height: 100%;
line-height: 70upx;
text-align: center;
color: #555555;
}
.uni-numbox-minus {
border: 2upx solid #cccccc;
border-right: none;
border-top-left-radius: 6upx;
border-bottom-left-radius: 6upx;
}
.uni-numbox-plus {
border: 2upx solid #cccccc;
border-left: none;
border-top-right-radius: 6upx;
border-bottom-right-radius: 6upx;
}
.uni-numbox-value {
border: 2upx solid #cccccc;
background-color: #ffffff;
width: 80upx;
height: 100%;
text-align: center;
}
.uni-numbox-disabled {
color: #c0c0c0;
}
引用组件web中代码：(其中item.num为动态值，item为列表循环项目)
组件返回的信息
onNumberChange(value,e) {
if(value==e.num){ //防止重复传送
return false;
}
uni.request({
url: '',
method: 'POST',
header: {'content-type': 'application/x-www-form-urlencoded'},
data: {},
success: res => {
if(!res.data.datas.error){
e.num = res.data.datas.num; //服务器返回值 根据业务需要写
}else{
uni.showToast({ title: res.data.datas.error,icon:"none"});
}
}
});
}
使用过程中，我们会发现，服务器接受了数量后才会同意该值，当不接受的时候 我们就得把后来增加的值恢复到没增加之前，动态改变item.num为原来的值的时候，而组件并为更新，原来才原值没有变化或相同的情况下组件并不会更新！
那么我们就需要修改一下组件，让它能实时更新和掌控
找到组件中以下代码
watch: {
value(val) {
this.inputValue = val;
},
inputValue(val) {
this.$emit('change', val);
}
}
修改为：
watch: {
value(val) {
this.inputValue = val;
},
inputValue(val) {
this.$emit('change', val);
if(this.value){
if(this.value!=this.inputValue){
this.inputValue = this.value;
}}
}
}
这样就完成了后端控制数量的增减过程