mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
04f7ea8105
* refactor(components): [statistic] * fix: type error * docs: fix style * chore: use rAF * chore: update docs
4.4 KiB
4.4 KiB
title, lang
| title | lang |
|---|---|
| Statistic | en-US |
Statistic
Display statistics.
Basic usage
:::demo To highlight a number or a group of numbers, such as statistical value, amount, and ranking, you can add elements such as icon and unit before and after the number and title.
statistic/basic
:::
Countdown
:::demo Countdown component, support to add other components control countdown.
statistic/countdown ::: :::tip
In formatting it is suggested to be in the range of days
:::
Card usage
:::demo Card usage display, can be freely combined
statistic/card
:::
Statistic API
Statistic Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
| value | Numerical content | ^[number] | 0 |
| decimal-separator | Setting the decimal point | ^[string] | . |
| formatter | Custom numerical presentation | ^[Function](value: number) => string | number |
— |
| group-separator | Sets the thousandth identifier | ^[string] | , |
| precision | numerical precision | ^[number] | 0 |
| prefix | Sets the prefix of a number | ^[string] | — |
| suffix | Sets the suffix of a number | ^[string] | — |
| title | Numeric titles | ^[string] | — |
| value-style | Styles numeric values | ^[string] / ^[object]CSSProperties | CSSProperties[] | string[] |
— |
Statistic Slots
| Name | Description |
|---|---|
| prefix | Numeric prefix |
| suffix | Suffixes for numeric values |
| title | Numeric titles |
Statistic Exposes
| Name | Description | Type |
|---|---|---|
| displayValue | current display value | ^[object]Ref<string | number> |
Countdown API
Countdown Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
| value | target time | ^[number] / ^[Dayjs] | — |
| format | Formatting the countdown display | ^[string] | HH:mm:ss |
| prefix | Sets the prefix of a countdown | ^[string] | — |
| suffix | Sets the suffix of a countdown | ^[string] | — |
| title | countdown titles | ^[string] | — |
| value-style | Styles countdown values | ^[string] / ^[object]CSSProperties | CSSProperties[] | string[] |
— |
Countdown Events
| Method | Description | Type |
|---|---|---|
| change | Time difference change event | ^[Function](value: number) => void |
| finish | countdown end event | ^[Function]() => void |
Countdown Slots
| Name | Description |
|---|---|
| prefix | countdown value prefix |
| suffix | countdown value suffix |
| title | countdown title |
Countdown Exposes
| Name | Description | Type |
|---|---|---|
| displayValue | current display value | ^[object]Ref<string> |