效果如下图在线预览APIsStatistic参数说明类型默认值title数值的标题stringundefinedvalue数值的内容string | number | slotundefinedvalueStyle设置数值的样式CSSProperties{}precision数值精度number0prefix设置数值的前缀string | slotundefinedsuffix设置数值的后缀string | slotundefinedseparator设置千分位标识符string,formatter自定义数值展示Function(value: string) valueSlots名称说明类型title自定义数值的标题v-slot:titledefault自定义数值的内容v-slot:defaultprefix自定义数值的前缀v-slot:prefixsuffix自定义数值的后缀v-slot:suffix创建统计数值组件Statistic.vue其中引入使用了以下工具函数formatNumber数字格式化监听插槽存在 useSlotsExistscript setup langtsimport{computed}fromvueimporttype{CSSProperties}fromvueimport{formatNumber,useSlotsExist}fromcomponents/utilsexportinterfaceProps{title?:string// 数值的标题 string | slotvalue?:string|number// 数值的内容 string | number | slotvalueStyle?:CSSProperties// 设置数值的样式precision?:number// 数值精度prefix?:string// 设置数值的前缀 string | slotsuffix?:string// 设置数值的后缀 string | slotseparator?:string// 设置千分位标识符formatter?:Function// 自定义数值展示}constpropswithDefaults(definePropsProps(),{title:undefined,value:undefined,valueStyle:()({}),precision:0,prefix:undefined,suffix:undefined,separator:,,formatter:(value:string)value})constslotsExistuseSlotsExist([title,prefix,suffix])constshowValuecomputed((){returnprops.formatter(formatNumber(props.value||,props.precision,props.separator))})constshowTitlecomputed((){returnslotsExist.title||props.title})constshowPrefixcomputed((){returnslotsExist.prefix||props.prefix})constshowSuffixcomputed((){returnslotsExist.suffix||props.suffix})/scripttemplatedivclassstatistic-wrapdiv v-ifshowTitleclassstatistic-titleslot nametitle{{title}}/slot/divdivclassstatistic-content:stylevalueStylespan v-ifshowPrefixclassstatistic-prefixslot nameprefix{{prefix}}/slot/spanspanclassstatistic-valueslot{{showValue}}/slot/spanspan v-ifshowSuffixclassstatistic-suffixslot namesuffix{{suffix}}/slot/span/div/div/templatestyle langlessscoped.statistic-wrap{font-size:14px;color:rgba(0,0,0,0.88);line-height:1.5714285714285714;.statistic-title{margin-bottom:4px;color:rgba(0,0,0,0.45);font-size:14px;}.statistic-content{color:rgba(0,0,0,0.88);font-size:24px;.statistic-prefix{display:inline-block;margin-right:4px;:deep(svg){fill:currentColor;}}.statistic-value{display:inline-block;direction:ltr;}.statistic-suffix{display:inline-block;margin-left:4px;:deep(svg){fill:currentColor;}}}}/style在要使用的页面引入其中引入使用了以下组件Vue3栅格GridVue3卡片Cardscript setup langtsimportStatisticfrom./Statistic.vueimport{LikeOutlined,ArrowUpOutlined,ArrowDownOutlined}fromant-design/icons-vuefunctionformatter(value:string):string{console.log(value,value)return1年有 value 天}/scripttemplatedivh1{{$route.name}}{{$route.meta.title}}/h1h2classmt30 mb10基本使用/h2RowCol:span12Statistic titleActive Users:value112893//ColCol:span12Statistic titleAccount Balance (CNY):precision2:value112893//Col/Rowh2classmt30 mb10添加前缀和后缀/h2Row:gutter16Col:span12Statistic titleFeedback:value1128template #suffixLikeOutlined//template/Statistic/ColCol:span12Statistic titleUnmerged:value90template #suffixspan%/span/template/Statistic/Col/Rowh2classmt30 mb10在卡片中使用/h2div stylewidth: 425px; background: #ececec; padding: 30px; border-radius: 8px;Row:gutter16Col:span12CardStatistic titleFeedback:value11.28:precision2suffix%:value-style{ color: #3f8600 }stylemargin-right: 50pxtemplate #prefixArrowUpOutlined//template/Statistic/Card/ColCol:span12CardStatistic titleIdle:value9.3:precision2suffix%:value-style{ color: #cf1322 }template #prefixArrowDownOutlined//template/Statistic/Card/Col/Row/divh2classmt30 mb10自定义数值样式/h2Statistic titleWorth:value1600000:value-style{ color: #3f8600 }prefix$suffix/ 天/h2classmt30 mb10设置数值精度/h2Statistic titlePrecision:value100000000.1:precision2/h2classmt30 mb10自定义千分位标识符/h2Statistic titlePrecision:value100000000.1separator;:precision3/h2classmt30 mb10自定义数值展示/h2Statistic titleFormatter:value365:value-style{ color: #1677ff }:formatterformatter//div/template