FusedNumber组件

组件说明

FusedNumber 组件是一个用于展示数字信息的灵活组件。它支持单独显示数字，也可以与数字符号或单位搭配使用，以满足不同的展示需求。组件默认使用 MiSans Bold 字体，并采用千分位格式化数字，帮助用户快速识别数字的位数。

特点

金额展示

• 当数字表示金额时，如果金额前有 + 或 - 符号，将不显示货币符号。
• 在句子中展示金额时，会使用货币单位“元”。
• 如果标题已标记货币单位，列表中的货币单位可以省略。
• 在图表中展示金额时，会使用货币符号“￥”。

大数字处理

对于较大的数字，如果无需精确展示（根据业务实际情况判断），组件可以结合“万”或“亿”单位进行展示，使数字更加易于阅读。

自定义字体

支持自定义字体家族，以便与不同的设计风格保持一致。

灵活的样式控制

提供选项清除默认字体样式，以便在特定场景下更好地融入页面设计。

组件演示

12,345.679
14 / 50
-1.23亿
1,234,567,890元
+1234567891
￥1,234,567,893
12345678.92%

组件使用

<template>
  <div>
    <FusedNumber :value="12345.6789" :style="{ color: '#ff00ff' }" /><br />
    <FusedNumber :value="'14/50'" /><br />
    <FusedNumber :value="-123456789" isBig /><br />
    <FusedNumber :value="1234567890" isAmount /><br />
    <FusedNumber :value="'+1234567891'" clearFont /><br />
    <FusedNumber :value="1234567893" isAmount isInChart clearFont /><br />
    <FusedNumber :value="1234567892" isPercent fontFamily="MiSans-Regular" />
  </div>
</template>

<script setup>
import { FusedNumber } from '@design-middle-center/fuse-design-vue'
import '@design-middle-center/fuse-design-vue/dist/style.css'
</script>

API说明

参数	说明	类型	默认值
value	要展示的数字或字符串	String, Number	-
isAmount	是否为金额，用于判断是否使用货币单位或符号	Boolean	false
isPercent	是否为百分比，用于判断是否显示百分比符号	Boolean	false
isInChart	是否在图表中，用于判断是否使用货币符号	Boolean	false
isBig	是否为大数字，用于判断是否使用'万'或'亿'为单位	Boolean	false
fontFamily	使用的字体家族	String	'MiSans'
clearFont	是否清除字体样式	Boolean	false
style	自定义样式	Object	{}