在vue项目中千分位展示输入金额,获取金额千分位,金额大写的方法
实现效果:在用户输入完成input失焦的时候,input文本框中显示的是千分位格式的金额;在用户再次聚焦的input文本框时,文本框中展示的是正常的金额值,用户可以修改金额,失焦的时候再次千分位展示。思路:用两个变量,一个变量负责展示,一个变量存储实际的值,保证在任何情况下,实际值不受影响,展示按需求去展示main.js中引入公共方法import validate from '@/utils/va
·
实现效果:
- 在用户输入完成input失焦的时候,input文本框中显示的是千分位格式的金额;在用户再次聚焦的input文本框时,文本框中展示的是正常的金额值,用户可以修改金额,失焦的时候再次千分位展示。
思路:
- 用两个变量,一个变量负责展示,一个变量存储实际的值,保证在任何情况下,实际值不受影响,展示按需求去展示
main.js中引入公共方法
import validate from '@/utils/validate';
Vue.prototype.$validate = validate
Vue.use(validate)
validate.js方法
export default {
//金额转换为千分位
formatCurrency(value, str) {
if (!str) str = '';
// str 规定货币类型
if (value == "0") return '0.00';
if(value == ".") return '';
if (!value) return '';
let val = Number(value).toFixed(2) // 提前保留两位小数
let intPart = parseInt(val) // 获取整数部分
let intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断 ???
let floatPart = '.00' // 预定义小数部分
val = val.toString() // 将number类型转为字符串类型,方便操作
let value2Array = val.split('.')
if (value2Array.length === 2) { // =2表示数据有小数位
floatPart = value2Array[1].toString() // 拿到小数部分
if (floatPart.length === 1) { // 补0,实际上用不着
return str + intPartFormat + '.' + floatPart + '0'
} else {
return str + intPartFormat + '.' + floatPart
}
} else {
return str + intPartFormat + floatPart
}
},
//限制输入金额
inputLimitAmount(val,digit){
digit = digit || 12;
let res = "";
if(!val) return "";
if(val == ".") return "";
let matchArr = val.match(/\./g);
if(matchArr && matchArr.length>1){
res = null;
}else{
if(val.split('.')[0].length > digit){
res = null;
}else{
res = val.split('.')[1] && val.split('.')[1].length > 2 ? val.split('.')[0] + '.' + val.split('.')[1].slice(0,2) : val;
}
}
return res ? res.replace(/[^0-9.]/g,"") : res;
},
// ======== 限制金额的输入及千分位展示 start============
formatAmountFocus(_attr, dataForm){
let that = _attr+'F';
dataForm[that] = dataForm[_attr];
},
formatAmountInput(_attr, dataForm, digit){
let that = _attr+'F';
let $thisVal = dataForm[_attr];
let $thatVal = dataForm[that];
let dig = digit ? digit : 12;
let formateVal = this.inputLimitAmount($thatVal,dig);
if(formateVal == null){
dataForm[that] = $thisVal
}else{
dataForm[that] = formateVal;
dataForm[_attr] = formateVal ? Number(formateVal).toFixed(2) : formateVal;
}
},
formatAmountBlur(_attr, dataForm){
let that = _attr+'F';
dataForm[that] = this.formatCurrency(dataForm[that]);
},
// ======== 限制金额的输入及千分位展示 end========
//获取金额大写的方法
getMoneyHanzi(n) {
if ((!n && n==="") || (!n && n!=0)) return;
let str = 0
n = typeof n === 'number' ? n + '' : n
str = n.substring(n.indexOf('.') + 1, n.indexOf('.') + 3)
let fraction = ['角', '分']
let digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
let unit = [['元', '万', '亿'], ['', '拾', '佰', '仟']]
let s = ''
for (let i = 0; i < fraction.length; i++) {
if (i === 0) {
s += (digit[parseInt(n * 10 * Math.pow(10, i) % 10)] + fraction[i]).replace(/零./, '')
} else if (i === 1) {
if (str.length === 2) {
if (str.substring(0, 1) === '0') {
s = '零角'
}
if (str.substring(0, 2) === '00') {
s = '整'
}
}
s += (digit[(n * 10 * Math.pow(10, i) % 10).toFixed(0)] + fraction[i]).replace(/零./, '')
}
}
s = s || '整'
n = Math.floor(n);
//区分小数点左边是否有值(解决分位显示零几分缺陷)
let flag = n;
for (let i = 0; i < unit[0].length && n > 0; i++) {
let p = ''
for (let j = 0; j < unit[1].length && n > 0; j++) {
p = digit[n % 10] + unit[1][j] + p
n = Math.floor(n / 10)
}
s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
}
let sum = flag == 0?s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '').replace(/^整$/, '零元整'):s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
return sum
}
}
组件中引用
<el-form-item label="单笔限额(元)">
<el-input
v-model="form.tranLmtF"
@focus="focus_Amount('tranLmt',$event)"
@input="inpLimit_Amount('tranLmt')"
@blur="getFormate_Amount('tranLmt')">
</el-input>
</el-form-item>
focus_Amount(filedName,ele) {
this.$validate.formatAmountFocus(filedName, this.form);
//下面这段代码是为了解决在IE11上为input赋值后,光标聚焦到最左侧的问题
let obj = ele.srcElement;
if(obj.setSelectionRange){
obj.setSelectionRange(obj.value.length,obj.value.length);
}else{
var range = obj.createTextRange();
range.collapse(true);
range.moveStart("character",obj.value.length);
range.moveEnd("character",0);
range.select();
}
},
inpLimit_Amount(filedName) {
this.$validate.formatAmountInput(filedName, this.form);
},
// blur
getFormate_Amount(filedName) {
this.$validate.formatAmountBlur(filedName, this.form);
if( this.form[filedName] == "" ){
this.form[filedName] = "0";
this.form[filedName + 'F'] = "0.00";
}
},
更多推荐
已为社区贡献16条内容
所有评论(0)