Skip to content

Commit daf1349

Browse files
JUST-LimboJUST-Limbo
authored
Docs:[Statistic] update docs and fix bugs (#22383)
1 parent 43a955a commit daf1349

4 files changed

Lines changed: 599 additions & 651 deletions

File tree

‎examples/docs/en-US/statistic.md‎

Lines changed: 150 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,82 @@
1-
## Statistic
1+
## Statistic
22

33
Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.
44

55
Countdown mode
66

7-
87
### Basic usage
8+
99
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
1010
:::demo
1111
```html
1212
<template>
13-
<div >
14-
<el-row :gutter="20">
15-
<el-col :span="6">
16-
<div>
17-
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
18-
</div>
19-
</el-col>
20-
<el-col :span="6">
21-
<div>
22-
<el-statistic title="Gender Distribution">
23-
<template slot="formatter">
24-
456/2
25-
</template>
26-
27-
</el-statistic>
28-
</div>
29-
</el-col>
30-
<el-col :span="6">
31-
<div>
32-
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
33-
<template slot="prefix">
34-
<i class="el-icon-s-flag" style="color: red"></i>
35-
</template>
36-
<template slot="suffix">
37-
<i class="el-icon-s-flag" style="color: blue"></i>
38-
</template>
39-
</el-statistic>
40-
</div>
41-
42-
</el-col>
43-
<el-col :span="6">
44-
<div>
45-
<el-statistic :value="like ? 521 : 520" title="Feedback">
46-
<template slot="suffix">
47-
<span @click="like = !like" class="like">
48-
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
49-
<i class="el-icon-star-off" v-show="!like"></i>
50-
</span> </template>
51-
</el-statistic>
52-
</div>
53-
</el-col>
13+
<div>
14+
<el-row :gutter="20">
15+
<el-col :span="6">
16+
<div>
17+
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
18+
</div>
19+
</el-col>
20+
<el-col :span="6">
21+
<div>
22+
<el-statistic title="Gender Distribution">
23+
<template slot="formatter"> 456/2 </template>
24+
</el-statistic>
25+
</div>
26+
</el-col>
27+
<el-col :span="6">
28+
<div>
29+
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
30+
<template slot="prefix">
31+
<i class="el-icon-s-flag" style="color: red"></i>
32+
</template>
33+
<template slot="suffix">
34+
<i class="el-icon-s-flag" style="color: blue"></i>
35+
</template>
36+
</el-statistic>
37+
</div>
38+
</el-col>
39+
<el-col :span="6">
40+
<div>
41+
<el-statistic :value="like ? 521 : 520" title="Feedback">
42+
<template slot="suffix">
43+
<span @click="like = !like" class="like">
44+
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
45+
<i class="el-icon-star-off" v-show="!like"></i>
46+
</span>
47+
</template>
48+
</el-statistic>
49+
</div>
50+
</el-col>
5451
</el-row>
5552
</div>
5653
</template>
5754

5855
<script>
59-
export default {
60-
data() {
61-
return {
62-
like: true,
63-
value1: 4154.564,
64-
value2: 2222,
65-
title: "Growth this year",
66-
input: "Hello Element UI!",
67-
};
68-
},
69-
};
56+
export default {
57+
data() {
58+
return {
59+
like: true,
60+
value1: 4154.564,
61+
value2: 2222,
62+
title: 'Growth this year',
63+
};
64+
},
65+
};
7066
</script>
71-
<style lang="scss" >
72-
.like {
73-
cursor: pointer;
74-
font-size: 25px;
75-
display: inline-block;
76-
}
67+
<style lang="scss">
68+
.like {
69+
cursor: pointer;
70+
font-size: 25px;
71+
display: inline-block;
72+
}
7773
</style>
7874
```
79-
:::
8075

76+
:::
8177

8278
### 倒计时
79+
8380
:::warning
8481
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
8582

@@ -88,129 +85,120 @@ If you need to add time to the original, please note that the overall time (the
8885
:::demo Providing a future time via 'value' will enable the countdown function
8986
```html
9087
<template>
91-
<div >
88+
<div>
9289
<el-row :gutter="20">
93-
<el-col :span="14">
94-
<div style="width: 100%; display: inline-block; ">
95-
<el-statistic :value="deadline2" time-indices title="商品降价">
96-
<template slot="suffix">
97-
The rush is about to begin
98-
</template>
99-
</el-statistic>
100-
</div>
101-
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
102-
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
103-
<template slot="suffix">
104-
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
105-
</template>
106-
</el-statistic>
107-
</div>
108-
109-
</el-col>
110-
<el-col :span="10">
111-
<el-card shadow="hover" style="width: 100%;">
112-
<div slot="header" class="clearfix">
113-
<span>文嘉《明日歌》</span>
114-
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
115-
</div>
116-
<div style="font-size: 18px;text-align: center; " >明日复明日</div>
117-
<div style="font-size: 18px;text-align: center;" >明日何其多</div>
118-
119-
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
120-
121-
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
122-
<div style="margin-top: 40px;"></div>
123-
<el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="Distance to Tomorrow:" time-indices > </el-statistic>
124-
</el-card>
125-
</el-col>
126-
</el-row>
127-
90+
<el-col :span="14">
91+
<div style="width: 100%; display: inline-block; ">
92+
<el-statistic :value="deadline2" time-indices title="商品降价">
93+
<template slot="suffix"> The rush is about to begin </template>
94+
</el-statistic>
95+
</div>
96+
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
97+
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
98+
<template slot="suffix">
99+
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
100+
</template>
101+
</el-statistic>
102+
</div>
103+
</el-col>
104+
<el-col :span="10">
105+
<el-card shadow="hover" style="width: 100%;">
106+
<div slot="header" class="clearfix">
107+
<span>文嘉《明日歌》</span>
108+
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
109+
</div>
110+
<div style="font-size: 18px;text-align: center; ">明日复明日</div>
111+
<div style="font-size: 18px;text-align: center;">明日何其多</div>
112+
<div style="font-size: 18px;text-align: center;">我生待明日</div>
113+
<div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
114+
<div style="margin-top: 40px;"></div>
115+
<el-statistic
116+
ref="statistic"
117+
@finish="hilarity"
118+
format="HH:mm:ss"
119+
:value="deadline4"
120+
title="Distance to Tomorrow:"
121+
time-indices
122+
>
123+
</el-statistic>
124+
</el-card>
125+
</el-col>
126+
</el-row>
128127
</div>
129128
</template>
130129

131130
<script>
132-
export default {
133-
data() {
134-
return {
135-
format:'HH小时:mm:ss:SSS',
136-
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
137-
deadline2: Date.now() + 1000 * 60 * 60 * 8,
138-
deadline3: Date.now() + 1000 * 60 *30,
139-
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
140-
};
141-
},
142-
methods: {
143-
hilarity() {
144-
this.$notify({
131+
export default {
132+
data() {
133+
return {
134+
deadline2: Date.now() + 1000 * 60 * 60 * 8,
135+
deadline3: Date.now() + 1000 * 60 * 30,
136+
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
137+
stop: true,
138+
};
139+
},
140+
methods: {
141+
hilarity() {
142+
this.$notify({
145143
title: 'Prompt',
146144
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
147-
duration: 0
145+
duration: 0,
148146
});
147+
},
148+
clickFn() {
149+
this.$refs.statistic.suspend(this.stop);
150+
this.stop = !this.stop;
151+
},
152+
add() {
153+
this.deadline3 = this.deadline3 + 1000 * 10;
154+
},
149155
},
150-
clickFn(){
151-
this.$refs.statistic.suspend( this.stop)
152-
this.stop=!this.stop
153-
},
154-
add(){
155-
this.deadline3= this.deadline3+ 1000 * 10
156-
}
157-
}
158-
};
156+
};
159157
</script>
160-
<style lang="scss" >
161-
.like {
162-
cursor: pointer;
163-
font-size: 25px;
164-
display: inline-block;
165-
}
166-
</style>
167158
```
168159
:::
169160

170-
171-
172-
173161
### Statistic Attributes
174162

175-
| Attribute | Description | Type | Accepted Values | Default |
176-
|------------- |---------------- |---------------- |---------------------- |-------- |
177-
| value | Numerical content | string \| number | - | - |
178-
| decimal-separator | Setting the decimal point | string | - | . |
179-
| formatter | Custom numerical presentation| v-slot \|({value}) => VNode | - | - |
180-
| group-separator | Sets the thousandth identifier | string | - | , |
181-
| precision | numerical precision | number | - | 0 |
182-
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
183-
| suffix |Sets the suffix of a number | string \| v-slot | - | - |
184-
| title | Numeric titles | string \| v-slot | - | - |
185-
| value-style | Styles numeric values | style | - | - |
186-
| rate | Set the ratio | number | - | 1000 |
187-
163+
| Attribute | Description | Type | Accepted Values | Default |
164+
| ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |
165+
| value | Numerical content | string \| number | - | - |
166+
| decimal-separator | Setting the decimal point | string | - | . |
167+
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
168+
| group-separator | Sets the thousandth identifier | string | - | , |
169+
| precision | numerical precision | number | - | 0 |
170+
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
171+
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
172+
| title | Numeric titles | string \| v-slot | - | - |
173+
| value-style | Styles numeric values | style | - | - |
174+
| rate | Set the ratio | number | - | 1000 |
188175

189176
### Statistic Slots
190-
| Name | Description |
191-
|------|--------|
192-
| prefix | Numeric prefix |
193-
| suffix | Suffixes for numeric values |
194-
| formatter | Numerical content |
195-
| title | Numeric titles |
196177

178+
| Name | Description |
179+
| --------- | --------------------------- |
180+
| prefix | Numeric prefix |
181+
| suffix | Suffixes for numeric values |
182+
| formatter | Numerical content |
183+
| title | Numeric titles |
197184

198-
### Statistic.Countdown Attributes
185+
### Statistic.Countdown Attributes
186+
187+
| Attribute | Description | Type | Options | Default |
188+
| ------------ | ---------------------------------------- | ------- | ----------- | ---------- |
189+
| time-indices | Whether to enable the countdown function | boolean | true\|false | false |
190+
| value | Required value, enter the bound value | string | — | — |
191+
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
199192

200-
| Attribute | Description | Type | Options | Default |
201-
|------------- |---------------- |---------------- |---------------------- |-------- |
202-
| time-indices | Whether to enable the countdown function | boolean | true\|false | false |
203-
| value | Required value, enter the bound value | string | — | — |
204-
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
205193
### Statistic.Countdown Events
206-
| Method | Description | Parameters |
207-
|---------|--------|---------|
208-
| change | Enable in the 'countdown' function | (value: Date) |
194+
195+
| Method | Description | Parameters |
196+
| ------ | ------------------------------------------ | ---------------- |
197+
| change | Enable in the 'countdown' function | (value: Date) |
209198
| finish | Launched after the 'countdown' is complete | (value: boolean) |
210199

211200
### Statistic Methods
212-
| Method | Description | Parameters |CallBack|
213-
| ---- | ---- | ---- |---- |
214-
| suspend | Pause the countdown|(value:boolean) |(value: Date) |
215-
216201

202+
| Method | Description | Parameters | CallBack |
203+
| ------- | ------------------- | --------------- | ------------- |
204+
| suspend | Pause the countdown | (value:boolean) | (value: Date) |

0 commit comments

Comments
 (0)