Vue3统计数值（Statistic）

置顶 theMuseCatcher

已于 2024-11-01 09:31:21 修改

阅读量2.2k

点赞数 1

分类专栏： Vue3 TypeScript Less 文章标签： vue3 components typescript

于 2023-07-18 11:23:29 首次发布

本文链接：https://blog.csdn.net/dandrose/article/details/131783242

版权

Vue3 同时被 3 个专栏收录

81 篇文章 13 订阅

订阅专栏

TypeScript

80 篇文章 4 订阅

订阅专栏

Less

74 篇文章 3 订阅

订阅专栏

文章展示了如何使用Vue3创建一个名为Statistic的组件，该组件用于显示带有各种自定义选项的统计数值，如数值标题、精度、前缀、后缀、千分位分隔符和格式化函数。用户可以自定义数值样式，设置前缀和后缀，并通过formatter函数控制数值的显示方式。示例代码包括组件的实现和在不同场景下的使用方法。

摘要由CSDN通过智能技术生成

效果如下图：

在这里插入图片描述

在线预览

APIs

Statistic

参数	说明	类型	默认值
title	数值的标题	string	undefined
value	数值的内容	string \| number \| slot	undefined
valueStyle	设置数值的样式	CSSProperties	{}
precision	数值精度	number	0
prefix	设置数值的前缀	string \| slot	undefined
suffix	设置数值的后缀	string \| slot	undefined
separator	设置千分位标识符	string	‘,’
formatter	自定义数值展示	Function	(value: string) => value

创建统计数值组件Statistic.vue

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

<script setup lang="ts">
import { computed } from 'vue'
import type { CSSProperties } from 'vue'
import { formatNumber, useSlotsExist } from '../utils'
interface Props {
  title?: string // 数值的标题 string | slot
  value?: string | number // 数值的内容 string | number | slot
  valueStyle?: CSSProperties // 设置数值的样式
  precision?: number //	数值精度
  prefix?: string // 设置数值的前缀 string | slot
  suffix?: string // 设置数值的后缀 string | slot
  separator?: string // 设置千分位标识符
  formatter?: Function // 自定义数值展示
}
const props = withDefaults(defineProps<Props>(), {
  title: undefined,
  value: undefined,
  valueStyle: () => ({}),
  precision: 0,
  prefix: undefined,
  suffix: undefined,
  separator: ',',
  formatter: (value: string) => value
})
const slotsExist = useSlotsExist(['title', 'prefix', 'suffix'])
const showValue = computed(() => {
  return props.formatter(formatNumber(props.value || '', props.precision, props.separator))
})
const showTitle = computed(() => {
  return slotsExist.title || props.title
})
const showPrefix = computed(() => {
  return slotsExist.prefix || props.prefix
})
const showSuffix = computed(() => {
  return slotsExist.suffix || props.suffix
})
</script>
<template>
  <div class="m-statistic">
    <div v-if="showTitle" class="statistic-title">
      <slot name="title">{{ title }}</slot>
    </div>
    <div class="statistic-content" :style="valueStyle">
      <span v-if="showPrefix" class="statistic-prefix">
        <slot name="prefix">{{ prefix }}</slot>
      </span>
      <span class="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>
.m-statistic {
  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>

在要使用的页面引入

其中引入使用了以下组件：

<script setup lang="ts">
import Statistic from './Statistic.vue'
import { LikeOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue'
function formatter(value: string): string {
  console.log('value', value)
  return '1年有 ' + value + ' 天'
}
</script>
<template>
  <div>
    <h1>{{ $route.name }} {{ $route.meta.title }}</h1>
    <h2 class="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>
    <h2 class="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>
    <h2 class="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>
    <h2 class="mt30 mb10">自定义数值样式</h2>
    <Statistic title="Worth" :value="1600000" :value-style="{ color: '#3f8600' }" prefix="$" suffix="/ 天" />
    <h2 class="mt30 mb10">设置数值精度</h2>
    <Statistic title="Precision" :value="100000000.1" :precision="2" />
    <h2 class="mt30 mb10">自定义千分位标识符</h2>
    <Statistic title="Precision" :value="100000000.1" separator=";" :precision="3" />
    <h2 class="mt30 mb10">自定义数值展示</h2>
    <Statistic title="Formatter" :value="365" :value-style="{ color: '#1677ff' }" :formatter="formatter" />
  </div>
</template>