有赞Vant Weapp组件增加api属性,以Stepper 步进器为例

开发小程序使用有赞组件可以省很多时间,其中Stepper 步进器的api属性中有一个decimal-length,可以用来固定显示小数位数,可以防止js出现9999999的情况,也可以限制多于几位小数,在这里操作的时候经常出现冲突,修改价格出现删小数还强迫两位小数,在这里增加了一个新的api属性为maxdec-length,意义为最多显示两位小数。来防止出现这个问题。

有赞Vant Weapp组件增加api属性,以Stepper 步进器为例_第1张图片

 

到微信小程序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参数:

    
            价格:
            
          

这样最终防止显示js中的精度问题以及限制小数点位数最多为两位,而不是必须为两位导致的更改的时候也删除不掉后面的小数位数。

你可能感兴趣的:(微信小程序)