input 价格自动补全 vue项目中的实际运用
最近做到需要输入价格的项目,提出要求,需要自动补全后两位,也在网上查了许多,但是没找到很完美的,就参考着自己做了一版:
html:
<el-form-item label="单价(元):" prop="unitPrice"> <el-input v-model="data.price" @input="priceFormat(2)" @blur="priceSave" size="mini" placeholder="请输入单价"></el-input> </el-form-item>
js:
methods: { //计算单价 decimal 为小数点后的精度 priceFormat(decimal){ var val = this.data.price val = val.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符 val = val.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的 val = val .replace('.', '$#$') .replace(/\./g, '') .replace('$#$', '.') switch (decimal) { case 1: val = val.replace(/^(-)*(\d+)\.(\d{1}).*$/, '$1$2.$3') break case 2: val = val.replace(/^(-)*(\d+)\.(\d{2}).*$/, '$1$2.$3') break case 3: val = val.replace(/^(-)*(\d+)\.(\d{3}).*$/, '$1$2.$3') break case 4: val = val.replace(/^(-)*(\d+)\.(\d{4}).*$/, '$1$2.$3') break case 5: val = val.replace(/^(-)*(\d+)\.(\d{5}).*$/, '$1$2.$3') break case 6: val = val.replace(/^(-)*(\d+)\.(\d{6}).*$/, '$1$2.$3') break case 7: val = val.replace(/^(-)*(\d+)\.(\d{7}).*$/, '$1$2.$3') break case 8: val = val.replace(/^(-)*(\d+)\.(\d{8}).*$/, '$1$2.$3') break case 9: val = val.replace(/^(-)*(\d+)\.(\d{9}).*$/, '$1$2.$3') break default: val = val.replace(/^(-)*(\d+)\.().*$/, '$1$2.$3') break } // 以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额 if (val.indexOf('.') < 0 && val != '') { if (val.length > 9) { val = val.substr(0, 9) } val = parseFloat(val) }else { const arr = val.split('.') if(arr[0].length > 0){ arr[0] = parseFloat(arr[0]) }else if(arr.length == 2 && arr[0] == '') { arr[0] = 0 } val = arr.join('.') } this.data.price = val }, priceSave(){ var val = this.data.price + '' if (val.indexOf('.') < 0 && val != '') { val = val + '.00' }else { const arr = val.split('.') if(arr.length == 2){ if(arr[1] == ''){ arr[1] = '00' }else if(arr[1].length == 1){ arr[1] = arr[1] + '0' } } val = arr.join('.') } this.data.price = val }, }
这样基本上满足了所有要求,如果有什么不对的地方,或可以改进的地方,欢迎评论。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器