效果图:
第一步:在src文件夹下新建filters文件夹,在该文件夹下新建index.js
内容如下
//人民币转大写
function rmbUpper(n) {
//形参
var fraction = ["角", "分"];
var digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
var unit = [
["元", "万", "亿"],
["", "拾", "佰", "仟"]
];
var head = n < 0 ? "欠" : "";
n = Math.abs(n);
var s = "";
for (var i = 0; i < fraction.length; i++) {
s += (
digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]
).replace(/零./, "");
}
s = s || "整";
n = Math.floor(n);
for (var i = 0; i < unit[0].length && n > 0; i++) {
var p = "";
for (var 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;
}
return (
head +
s
.replace(/(零.)*零元/, "元")
.replace(/(零.)+/g, "零")
.replace(/^整$/, "零元整")
);
}
export {
rmbUpper
}
第二步:在main.js中,引用和注册全局过滤器
import * as filters from './filters' // global filters
// register global utility filters.
Object.keys(filters).forEach(key => {
console.log(filters,key,filters[key])
Vue.filter(key, filters[key])
})
第三步: 页面中直接使用
<el-form-item label="金额大写">
<span>{{addFormField.money | rmbUpper}}</span>
</el-form-item>