element-ui实现input输入框金额数字添加千分位组件
2021-03-05 11:34
806 查看
创建一个amountFormat.js
const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,"); return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}.00`; }; //去除千分位中的‘,’ const delcommafy = function (num){ if(!num) return num; num = num.toString(); num = num.replace(/,/gi, ''); return num; }; const valdateFn = function (rule,val,cb) { setTimeout(() => { if(val) { let inputVal = delcommafy(val); if (rule.test(inputVal)) { cb() } else { cb('只能是数字金额,最多两位小数') } } cb() }) } // 验证金额数字可以为负数 const moneyValid = function (rule,val,cb) { valdateFn(/((^-?[1-9]\d*)|^-?0)(\.\d{0,2}){0,1}$/,val,cb); }; // 验证金额数字不可以为负数 const moneyNValid = function (rule,val,cb) { valdateFn(MoneyTest,val,cb); }; // 获取输入框的值 // const getInputValue = function (el) { // let inputVal = el.target.value || ''; // return comdify(delcommafy(inputVal)); // }; // 获取输入框的值 export const getInputValue = (el) =>{ let inputVal = el.target.value || ''; return comdify(delcommafy(inputVal)); };
vue页面中的使用
import { getInputValue } from "@/utils/amountFormat.js";
template中: <el-input style="width: 220px" placeholder="请输入注册资本" v-model.number="formData.registCaptial" @blur="inputMoneyFomet($event, 'registCaptial')" clearable :disabled="detailFlag === 1 ? true : false" ></el-input> javascipet中: inputMoneyFomet(el, name) { this.formData[name] = getInputValue(el); },
相关文章推荐
- vue element-ui实现input输入框金额数字添加千分位
- Element-Ui input只允许输入数字和两位小数,封装input组件
- elementui tree 组件实现鼠标移入节点,节点后面显示添加删除按钮
- VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能 超简单!!!
- vue + elementUI 给input输入框添加 字体小图标
- js实现input输入框只能输入数字的功能(完美测试通过)
- jQuery实现动态添加、删除按钮及input输入框的方法
- 通过cloneya无刷新动态添加或减少多个input输入框前后台代码实现
- angular 实现的输入框数字千分位及保留几位小数点功能示例
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
- 利用JS实现为数字添加千分位的操作
- Vue第一个自定义组件:数字输入框(number-input)
- element ui+vue实现分页组件传值
- js实现Element中input组件的部分功能并封装成组件(实例代码)
- vue+ElementUI实现订单页动态添加产品效果
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- js实现input输入框只能输入数字的功能(完美测试通过)
- vue -element-ui 文件上传upload 组件 实现 及其后台
- element-ui表格拖曳标题分组合并排序组件的实现
- 微信小程序picker组件下拉框选择某个值动态添加input输入框