企业官网建设流程全解析

效果如下图：

在线预览

APIs

Statistic

Slots

创建统计数值组件Statistic.vue

其中引入使用了以下工具函数：

• formatNumber数字格式化
• 监听插槽存在 useSlotsExist

<script setup lang="ts">import{computed}from'vue'importtype{CSSProperties}from'vue'import{formatNumber,useSlotsExist}from'components/utils'exportinterfaceProps{title?:string// 数值的标题 string | slotvalue?:string|number// 数值的内容 string | number | slotvalueStyle?:CSSProperties// 设置数值的样式precision?:number// 数值精度prefix?:string// 设置数值的前缀 string | slotsuffix?:string// 设置数值的后缀 string | slotseparator?:string// 设置千分位标识符formatter?:Function// 自定义数值展示}constprops=withDefaults(defineProps<Props>(),{title:undefined,value:undefined,valueStyle:()=>({}),precision:0,prefix:undefined,suffix:undefined,separator:',',formatter:(value:string)=>value})constslotsExist=useSlotsExist(['title','prefix','suffix'])constshowValue=computed(()=>{returnprops.formatter(formatNumber(props.value||'',props.precision,props.separator))})constshowTitle=computed(()=>{returnslotsExist.title||props.title})constshowPrefix=computed(()=>{returnslotsExist.prefix||props.prefix})constshowSuffix=computed(()=>{returnslotsExist.suffix||props.suffix})</script><template><divclass="statistic-wrap"><div v-if="showTitle"class="statistic-title"><slot name="title">{{title}}</slot></div><divclass="statistic-content":style="valueStyle"><span v-if="showPrefix"class="statistic-prefix"><slot name="prefix">{{prefix}}</slot></span><spanclass="statistic-value"><slot>{{showValue}}</slot></span><span v-if="showSuffix"class="statistic-suffix"><slot name="suffix">{{suffix}}</slot></span></div></div></template><style lang="less"scoped>.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栅格（Grid）
• Vue3卡片（Card）

<script setup lang="ts">importStatisticfrom'./Statistic.vue'import{LikeOutlined,ArrowUpOutlined,ArrowDownOutlined}from'@ant-design/icons-vue'functionformatter(value:string):string{console.log('value',value)return'1年有 '+value+' 天'}</script><template><div><h1>{{$route.name}}{{$route.meta.title}}</h1><h2class="mt30 mb10">基本使用</h2><Row><Col:span="12"><Statistic title="Active Users":value="112893"/></Col><Col:span="12"><Statistic title="Account Balance (CNY)":precision="2":value="112893"/></Col></Row><h2class="mt30 mb10">添加前缀和后缀</h2><Row:gutter="16"><Col:span="12"><Statistic title="Feedback":value="1128"><template #suffix><LikeOutlined/></template></Statistic></Col><Col:span="12"><Statistic title="Unmerged":value="90"><template #suffix><span>%</span></template></Statistic></Col></Row><h2class="mt30 mb10">在卡片中使用</h2><div style="width: 425px; background: #ececec; padding: 30px; border-radius: 8px;"><Row:gutter="16"><Col:span="12"><Card><Statistic title="Feedback":value="11.28":precision="2"suffix="%":value-style="{ color: '#3f8600' }"style="margin-right: 50px"><template #prefix><ArrowUpOutlined/></template></Statistic></Card></Col><Col:span="12"><Card><Statistic title="Idle":value="9.3":precision="2"suffix="%":value-style="{ color: '#cf1322' }"><template #prefix><ArrowDownOutlined/></template></Statistic></Card></Col></Row></div><h2class="mt30 mb10">自定义数值样式</h2><Statistic title="Worth":value="1600000":value-style="{ color: '#3f8600' }"prefix="$"suffix="/ 天"/><h2class="mt30 mb10">设置数值精度</h2><Statistic title="Precision":value="100000000.1":precision="2"/><h2class="mt30 mb10">自定义千分位标识符</h2><Statistic title="Precision":value="100000000.1"separator=";":precision="3"/><h2class="mt30 mb10">自定义数值展示</h2><Statistic title="Formatter":value="365":value-style="{ color: '#1677ff' }":formatter="formatter"/></div></template>