设置数值输入框显示格式

场景描述

显示金额时前面加上￥或者$符号

实现思路

输入框提供的“输入框展示值格式”(formatter)和“转换数字的方式”(parser)属性进行设置

具体实现

输入框组件绑定了数值或小数类型的字段后会显示“数值输入配置”或“小数输入配置”

点配置进入后有“输入框展示值格式”和“转换数字的方式”设置

“输入框展示值格式”(formatter)：指定输入框展示值的格式

“转换数字的方式”parser：指定从 formatter 里转换回数字的方式，和 formatter 搭配使用

因此在“输入框展示值格式”上点跳转，在对应的js中设置显示的格式，如下：

    inputNumber1FormatterFn = (value, info) => {
        if(value){
            return `$${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
    }

在“转换数字的方式”上点跳转，在对应的js中才把数据转换为要存储的值，如下：

    inputNumber1ParserFn = (str) => {
        if(str){
            return  str.replace(/\$\s?|(,*)/g, '');
        }
    }

运行时展示如下：

存储的值如下：