accounting，格式化数字和货币

vue 使用 accounting 过滤数字、处理成我们想要的样子

基于accounting.js的轻量级vue货币过滤器。

下载 (Download)

# NPM
npm install vue-currency-filter

# Yarn
yarn add vue-currency-filter

处理方法

• 在vue项目utils目录中，新建一个MoneyFormat.js文件

import money from "accounting-js";

// 千分位 保留整数 绝对值
export const amountFormatIntAbs = val => {
  return money.formatNumber(Math.abs(money.unformat(val)), {
    precision: 0,
    thousand: ","
  });
};

// 千分位 保留整数 保留正负号
export const amountFormatInt = val => {
  return money.formatNumber(money.unformat(val), {
    precision: 0,
    thousand: ","
  });
};

// 千分位 保留两位小数 绝对值
export const amountFormat2Abs = val => {
  return money.formatNumber(Math.abs(money.unformat(val)), {
    precision: 2,
    thousand: ","
  });
};

// 千分位 保留两位小数 保留正负号
export const amountFormat2 = val => {
  return money.formatNumber(money.unformat(val), {
    precision: 2,
    thousand: ","
  });
};

// 无千分位 保留整数 绝对值
// 用于表示数量 单车用量等
export const amountJustNumber = val => {
  return money.formatNumber(Math.abs(money.unformat(val)), {
    precision: 0,
    thousand: ""
  });
};

// 变为数字
export const amountUnFormat = val => {
  return money.unformat(val);
};

export default {
  install(Vue, Opt) {
    // 金额格式化
    // 千分位 保留整数 绝对值
    Vue.filter("AbsMoney", val => {
      return amountFormatIntAbs(val);
    });
    // 千分位 保留整数 保留正负号
    Vue.filter("Money", val => {
      return amountFormatInt(val);
    });
    // 千分位 保留两位小数 绝对值
    Vue.filter("AbsMoney2", val => {
      return amountFormat2Abs(val);
    });
    // 千分位 保留两位小数 保留正负号
    Vue.filter("Money2", val => {
      return amountFormat2(val);
    });

    // 无千分位 保留整数 绝对值
    Vue.filter("JustNum", val => {
      return amountJustNumber(val);
    });

    Vue.filter("FilterEmpty", val => {
      let empty = [null, "null"];
      return empty.includes(val) ? "" : val;
    });
  }
};

• 在main.js中引入 挂载到vue上

import Vue from "vue";
import App from "./App";
import router from "./router";

// 清除浏览器默认样式
import "normalize.css";
import "less";

// 引入ElementUI
import ElementUI from "element-ui";
import "sgm-element-ui/lib/theme-sgm/index.css"
// 引入封装好的国际化插件 详见/lang/config
import {
    i18n
} from './lang/config'

import MoneyFormat from '@/utils/MoneyFormat'


//
Vue.use(MoneyFormat);
Vue.use(ElementUI);

• 页面中使用

<el-table-column prop="price">
   <template slot-scope="scope">
        <span>{{ scope.row.price | AbsMoney2 }}</span>
    </template>
</el-table-column>

unformat() 解析数字

unformat() 方法能够从任何格式的字符串中解析出原始数字：

• accounting 更多使用方法请参考：accounting详解