NumberFormat 数字格式化

简介

将数字格式化为指定格式，例如千分位或货币。

代码演示

基础使用

传递数字或字符串类型数字即可展示为千分位形式。

<template>
  <co-number-format value="134814782" />
</template>

百分比格式

设置 type="percent" 会格式化为百分比格式。

<template>
  <co-number-format value="0.4562" type="percent" />
</template>

货币

设置 type="currency" 展示为货币形式。

<template>
  <div>
    <co-number-format type="currency" value="134814782" :precision="2" />
  </div>
  <div>
    <co-number-format
      type="currency"
      locales="en-US"
      currency="USD"
      value="134814782"
      :precision="2"
    />
  </div>
</template>

<script lang="ts" setup></script>

动画

通过设置 animate ，每当值变更时，会从旧值滚动到新的值。

<template>
  <el-button class="me-4" @click="onClick">随机数</el-button>
  <co-number-format :value="value" animate />
</template>

<script lang="ts" setup>
import { random } from 'lodash-es';
import { ref } from 'vue';

const value = ref(random(1e3, 9e6));

const onClick = () => {
  value.value = random(1e3, 9e6);
};
</script>

API

NumberFormatProps

属性	描述	类型	默认值
value	要展示的数值	number | string	-
precision	小数个数	number	0
animate	是否动画	boolean	false
duration	动画持续时间，单位毫秒	number	1500
locales	BCP 47 语言标签，详见	string	'zh-Hans'
type	格式化样式	'currency' | 'decimal' | 'percent'	'decimal'
currency	货币类型，详见	string	'CNY'
before-display	在格式化后的值展示前进行处理	(value: string) => string	-