有个项目在写合同时需要实时显示出中文大写数字。现在需求是将阿拉伯数字数字转换成中文的大写数字。
<view class="list">
<view class="left">首付款(元)</view>
<view class="right">
<input type="number" v-model="form.payment_first" placeholder="请输入首付款(元)" class="inp" />
</view>
</view>
<view class="list">
<view class="left">首付款(大写)</view>
<view class="right">
<input type="text" v-model="form.payment_first_uppercase" placeholder="请输入首付款(大写)" class="inp" />
</view>
</view>
转换大写数字工具
var Utils={
/*
单位
*/
units:'个拾佰仟萬@#%億^&~',
/*
字符
*/
chars:'零壹贰叁肆伍陆柒捌玖',
/*
数字转中文
@number {Integer} 形如123的数字
@return {String} 返回转换成的形如 一百二十三 的字符串
*/
numberToChinese:function(number){
var a=(number+'').split(''),s=[],t=this;
if(a.length>12){
throw new Error('too big');
}else{
for(var i=0,j=a.length-1;i<=j;i++){
if(j==1||j==5||j==9){//两位数 处理特殊的 1*
if(i==0){
if(a[i]!='1')s.push(t.chars.charAt(a[i]));
}else{
s.push(t.chars.charAt(a[i]));
}
}else{
s.push(t.chars.charAt(a[i]));
}
if(i!=j){
s.push(t.units.charAt(j-i));
}
}
}
//return s;
return s.join('').replace(/零([十百千万亿@#%^&~])/g,function(m,d,b){//优先处理 零百 零千 等
b=t.units.indexOf(d);
if(b!=-1){
if(d=='亿')return d;
if(d=='万')return d;
if(a[j-b]=='0')return '零';
}
return '';
}).replace(/零+/g,'零').replace(/零([万亿])/g,function(m,b){// 零百 零千处理后 可能出现 零零相连的 再处理结尾为零的
return b;
}).replace(/亿[万千百]/g,'亿').replace(/[零]$/,'').replace(/[@#%^&~]/g,function(m){
return {'@':'十','#':'百','%':'千','^':'十','&':'百','~':'千'}[m];
}).replace(/([亿万])([一-九])/g,function(m,d,b,c){
c=t.units.indexOf(d);
if(c!=-1){
if(a[j-c]=='0')return d+'零'+b;
}
return m;
});
}
};
export default Utils;
导入方法
import Utils from "@/utils/num-cn.js"
在watch监听对象中的属性,将转换好的内容显示到页面中
ps:因为要监听的是对象,所以需要深度监听
data() {
return {
form: {
payment_first_uppercase:""
}
}
},
watch:{
"form.payment_first":{
handler(newval,oldval){
this.form.payment_first_uppercase=Utils.numberToChinese(newval)
},
immediate:true
}
},