mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-14 18:11:48 +08:00
4.5 KiB
4.5 KiB
| 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. And use vueuse to add animated transitions to value.
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> |