【VUE】使用vant组件van-field时格式化金额保留两位小数

最新推荐文章于 2023-12-07 15:29:42 发布

张迅之

最新推荐文章于 2023-12-07 15:29:42 发布

阅读量4.3k

点赞数 5

文章标签： vue.js 前端 vant

本文链接：https://blog.csdn.net/d38825/article/details/130006010

版权

该段代码展示了一个Vue组件`van-field`，用于处理充值金额的输入。它限制输入为数字类型，允许一个小数点且最多两位小数。函数`numberFixedDigit`通过正则表达式清理无效字符并确保金额格式正确。

摘要由CSDN通过智能技术生成

    <van-field
        v-model="curValue"
        label="充值金额"
        placeholder="请输入充值金额"
        type="number"
        input-align="right"
        @input="numberFixedDigit"
    />

/**
 * 格式化输入金额
 * @param e
 */
function numberFixedDigit(e) {
  e.target.value = e.target.value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
  e.target.value = e.target.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
  e.target.value = e.target.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
  e.target.value = e.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
  e.target.value = e.target.value.replace(/^\./g, ''); //首位不能输入“.”
  if (e.target.value.indexOf(".") < 0 && e.target.value != "") {//如果没有小数点，首位不能为0，如01、02...
    e.target.value = parseFloat(e.target.value);
  }
  nextTick(() => {
    curValue.value = e.target.value
  })
}