VUE之全局过滤器——filter

效果图:

第一步：在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>