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

开发小程序使用有赞组件可以省很多时间,其中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中的精度问题以及限制小数点位数最多为两位,而不是必须为两位导致的更改的时候也删除不掉后面的小数位数。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
可以使用Vant Weapp中的Picker组件和Popup组件进行组合,实现类似于选择器的效果。具体步骤如下: 1. 在需要触发选择器的元素上绑定一个点击事件,在事件处理函数中调用Popup组件的打开方法。 2. 在Popup组件中放置一个Picker组件,并设置Picker组件的数据、事件处理函数等属性。 3. 当Picker组件中的值发生变化时,通过事件处理函数将选中的值传递给父组件,并在父组件中更新需要显示的内容。 下面是一个示例代码: ```html <!-- 在需要触发选择器的元素上绑定点击事件 --> <view bindtap="showPopup">选择</view> <!-- 弹出框 --> <van-popup show="{{showPopup}}" bind:close="onClose"> <van-picker value="{{value}}" range="{{range}}" bind:change="onChange" /> </van-popup> ``` ```javascript Page({ data: { showPopup: false, value: '', range: ['选项1', '选项2', '选项3'] }, // 点击触发选择器弹出框 showPopup() { this.setData({ showPopup: true }); }, // 关闭弹出框 onClose() { this.setData({ showPopup: false }); }, // 选择器数值变化时的回调函数 onChange(event) { const { value } = event.detail; this.setData({ value, // 根据选中的值更新需要显示的内容 selectedOption: this.data.range[value] }); } }); ``` 以上代码中,当用户点击“选择”按钮时,会触发showPopup方法,将showPopup变量设置为true,从而弹出Popup组件。在Popup组件中,放置了一个Picker组件,用于选择需要的值。当用户选择完毕后,会触发Picker组件的change事件,将选中的值传递给父组件,并更新需要显示的内容。最后,在Popup组件的close事件中,将showPopup变量设置为false,关闭弹出框。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值