Vue3_全局应用千位分隔符

应用场景：基于 vue3 + ts + Element-plus

应用需求：① 处理千分位并保留两位小数（要求保留两位小数）

                  ② 将整数位处理成千分位，小数位保留不变（保留多位小数）

 一、全局应用文件

将 numberFormatMixin.ts 文件，放入合适位置，并在 main.ts 中注册

（numberFormatMixin.ts）

import { App } from 'vue'

// 使用正则表达式添加千分号
function addCommas(value: number): string {
  // ①如下方法：处理千分位并保留两位小数
  // return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  // ②如下方法：将整数位处理成千分位，小数位不变
  const parts = String(value).split('.')
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  return parts.join('.')
}

// 定义全局 mixin
const numberFormatMixin = {
  methods: {
    // 添加千分号
    formatNumber(value: number): string {
      return addCommas(value)
    }
  }
}

// 定义插件
const NumberFormatPlugin = {
  install(app: App) {
    app.mixin(numberFormatMixin)
  }
}

export default NumberFormatPlugin

（main.ts） 

import NumberFormatPlugin from './numberFormatMixin'

// 创建实例
const setupAll = async () => {
  app.use(NumberFormatPlugin)
  app.mount('#app')
}

setupAll()

 二、应用

1、利用全局文件应用

formatNumber(value)

(value 设置为需要使用千分位的数据)

    <template #header>
      <div class="card-header">
        <span>总览</span>
        <div class="total">
          // 如下，total 是需要转化千分位的数据
          异常统计 <span>{{ formatNumber(total) }}</span>
        </div>
      </div>
    </template>

2、单个应用，只需将如下代码中的 value 设置为需要使用千分位的数据即可

  // ①如下方法：处理千分位并保留两位小数
  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')

  // ②如下方法：将整数位处理成千分位，小数位不变
  const parts = String(value).split('.')
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  return parts.join('.')