Skip to content

vStat 统计卡片

用于展示统计数值的卡片组件。

基础用法

vue
<script setup>
import { vStat } from '@twi1i9ht/visual-lib'
</script>

<template>
  <vStat label="总销售额" :value="126560" prefix="¥" :precision="2" />
</template>

带趋势

vue
<template>
  <vStat label="周同比" :value="12.5" suffix="%" trend="up" :trend-value="3.2" />
</template>

Props

属性类型默认值说明
labelstring标签文字
valuenumber | string数值
prefixstring前缀(如 ¥)
suffixstring后缀(如 %)
precisionnumber0小数位数
trend'up' | 'down'趋势方向
trendValuenumber趋势值
valueColorstring数值颜色
labelColorstring标签颜色
valueSizenumber32数值字号
labelSizenumber14标签字号

Released under the MIT License.