vue 阿拉伯数字转换为中文大写数字(允许输入两位小数)
//这里的一些输入框和中文大写的显示样式,我就没写啦,<template><div><input type="number" placeholder="请输入投资金额" v-model='form.investMoney' @input="perProfit"></div>//span元素下面显示中文大写金额...
·
//这里的一些输入框和中文大写的显示样式,我就没写啦,
<template>
<div>
<input type="number" placeholder="请输入投资金额" v-model='form.investMoney' @input="perProfit">
</div>
//span元素下面显示中文大写金额
<div>
<span>{{text}}</span>
</div>
</template>
<script>
export default{
data(){
return{
form:{investMoney:''} ,
text:'',
unit:new Array("仟", "佰", "拾", "", "仟", "佰", "拾", "", "角", "分")
}
} ,
methods:{
toDx(n) { //阿拉伯数字转换函数
switch (n) {
case "0":
return "零";
case "1":
return "壹";
case "2":
return "贰";
case "3":
return "叁";
case "4":
return "肆";
case "5":
return "伍";
case "6":
return "陆";
case "7":
return "柒";
case "8":
return "捌";
case "9":
return "玖";
}
},
preProfit(e) {
//输入金额时,限制小数后两位正则表达式
var that = this;
e.target.value=(e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
that.form.investMoney = e.target.value;
//这里具体是一些输入金额的验证
//if(!that.form.investMoney){
//this.$Message.error('请输入正确的投资金额');
// this.form.investMoney ='';
//return
//}
// if(this.form.investMoney !==''){
// var m = this.form.investMoney
//现在才是重点:阿拉伯数数字转换成中文大写的主要部分
m *= 100;
m += "";
var length = m.length;
var result = "";
for (var i = 0; i < length; i++) {
if (i == 2) {
result = "元" + result;
} else if (i == 6) {
result = "万" + result;
}
if (m.charAt(length - i - 1) == 0) {
if (i != 0 && i != 1) {
if (result.charAt(0) != '零' && result.charAt(0) != '元' && result.charAt(0) != '万') {
result = "零" + result;
}
}
continue;
}
result = this.toDx(m.charAt(length - i - 1)) + this.unit[this.unit.length - i - 1] + result;
}
result += result.charAt(result.length - 1) == '元' ? "整" : "";
this.text=result;
}
if(this.form.investMoney < 1){
this.$Message.error('投资金额必须大于1元');
return
}
if(this.form.investMoney > this.table.remainMoney){
this.$Message.error('不能超过可投金额');
this.form.investMoney ='';
return
}
}
}
</script>
这是一个简单的效果图
但是这个还有一个小小的bug:
输入整数的金额是没任何问题的,只是输入两位小数的时候,下面显示的大写会出现
undefined或者是null,这个问题现在还在继续解决中............
更多推荐
已为社区贡献1条内容
所有评论(0)