Statistic 통계 수치

단일 통계 수치를 강조하여 보여줍니다. 천 단위 구분, 소수 정밀도, 접두/접미사를 지원하고, 문자열 value 로 아주 큰 숫자를 담을 수 있습니다.

통계 수치

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 48px; flex-wrap: wrap">
      <LhStatistic title="소장 작품" :value="1280" :separator="separator" suffix=" 점" />
      <LhStatistic title="오늘 방문자" :value="visitors" />
      <LhStatistic title="평균 가격(만)" :value="price" :precision="2" prefix="¥" />
      <LhStatistic title="초대형 숫자" value="9007199254740993" />
    </div>
    <p class="demo-note">separator 에 빈 문자열을 넘기면 천 단위 그룹화를 끌 수 있습니다</p>
    <div class="demo-row" style="gap: 48px; flex-wrap: wrap; margin-top: 16px">
      <LhStatistic title="천 단위 구분 없음" :value="visitors" separator="" />
      <LhStatistic :value="2026" suffix=" 년" />
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    separator: ',',
    visitors: 38651,
    price: 182.5,
  }),
}
</script>

Props

프로퍼티	설명	타입	기본값
title	수치 제목 (수치 위에 표시)	string	—
value	통계 수치; 문자열 형식이면 아주 큰 숫자나 부호가 있는 텍스트를 담을 수 있습니다	number \| string	—
precision	소수 정밀도	number	—
separator	천 단위 구분자; 빈 문자열이면 그룹화 끔	string	—
prefix	수치 접두사, 예: 통화 기호	string	—
suffix	수치 접미사, 예: 단위	string	—
sx	sx 레이아웃 단축 프로퍼티	—	—