开发小程序使用有赞组件可以省很多时间,其中Stepper 步进器的api属性中有一个decimal-length,可以用来固定显示小数位数,可以防止js出现9999999的情况,也可以限制多于几位小数,在这里操作的时候经常出现冲突,修改价格出现删小数还强迫两位小数,在这里增加了一个新的api属性为maxdec-length,意义为最多显示两位小数。来防止出现这个问题。
到微信小程序npm加载的vantweapp中找到stepper步进器的index.js中,添加代码如下:
decimalLength: {
type: Number,
value: null,
observer: 'check',
},
//下面maxdecLenth为新添加的
maxdecLength: {
type: Number,
value: null,
observer: 'check',
},
……………………………………………………………………………………………………………………………………………………………………………………
//在onInput方法中添加:
let formatted = this.filter(value);
// limit max decimal length
//下面为新添加的:
if (isDef(this.data.maxdecLength) && formatted.indexOf('.') !== -1) {
if (formatted.split(".")[1].length > this.data.maxdecLength) {
formatted = (Number(formatted).toFixed(this.data.maxdecLength)).toString();
}
}
添加了maxdecLength变量,来接受参数,意义为当有这个参数并且步进器中输入的数有小数点时候,判断小数点后的位数是否大于2,如果大于2的话就处理掉。
在微信小程序中的wxml添加maxdec-length参数:
<view class="stepper-flex">
<view class="stepper-text">价格:</view>
<van-stepper id="{{index}}" input-width="60px" step="1" value="{{item.comPrice}}" maxdec-length="{{ 2 }}"
min="0" max="{{item.count*item.salePrice}}" bind:change="priceChange" />
</view>
这样最终防止显示js中的精度问题以及限制小数点位数最多为两位,而不是必须为两位导致的更改的时候也删除不掉后面的小数位数。