Skip to content

Commit 0034a49

Browse files
webvs2yang
authored and
hzsrc
committed
chore: add new component statistics (ElemeFE#22159)
* statistic：新增statistic组件，用于数值展示和倒计时 Co-authored-by: yang <[email protected]>
1 parent 4799f57 commit 0034a49

File tree

15 files changed

+1699
-378
lines changed

15 files changed

+1699
-378
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<p align="center">
22
<img src="https://cdn.rawgit.com/ElemeFE/element/dev/element_logo.svg">
3+
1212
34
</p>
45

56
<p align="center">

‎components.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
"cascader-panel": "./packages/cascader-panel/index.js",
8181
"avatar": "./packages/avatar/index.js",
8282
"drawer": "./packages/drawer/index.js",
83+
"statistic": "./packages/statistic/index.js"
8384
"popconfirm": "./packages/popconfirm/index.js",
8485
"skeleton": "./packages/skeleton/index.js",
8586
"skeleton-item": "./packages/skeleton-item/index.js",

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

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
## Statistic
2+
3+
Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.
4+
5+
6+
7+
Countdown mode
8+
9+
10+
### Basic usage
11+
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
12+
:::demo
13+
```html
14+
<template>
15+
<div >
16+
<el-row :gutter="20">
17+
<el-col :span="6">
18+
<div>
19+
<el-statistic groupSeparator="," :precision="2" :value="value2" :title="title"></el-statistic>
20+
</div>
21+
</el-col>
22+
<el-col :span="6">
23+
<div>
24+
<el-statistic title="Gender Distribution">
25+
<template slot="formatter">
26+
456/2
27+
</template>
28+
29+
</el-statistic>
30+
</div>
31+
</el-col>
32+
<el-col :span="6">
33+
<div>
34+
<el-statistic groupSeparator="," :precision="2" decimalSeparator="." :value="value1" :title="title">
35+
<template slot="prefix">
36+
<i class="el-icon-s-flag" style="color: red"></i>
37+
</template>
38+
<template slot="suffix">
39+
<i class="el-icon-s-flag" style="color: blue"></i>
40+
</template>
41+
</el-statistic>
42+
</div>
43+
44+
</el-col>
45+
<el-col :span="6">
46+
<div>
47+
<el-statistic :value="like ? 521 : 520" title="Feedback">
48+
<template slot="suffix">
49+
<span @click="like = !like" class="like">
50+
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
51+
<i class="el-icon-star-off" v-show="!like"></i>
52+
</span> </template>
53+
</el-statistic>
54+
</div>
55+
</el-col>
56+
</el-row>
57+
</div>
58+
</template>
59+
60+
<script>
61+
export default {
62+
data() {
63+
return {
64+
like: true,
65+
value1: 4154.564,
66+
value2: 2222,
67+
title: "Growth this year",
68+
input: "Hello Element UI!",
69+
};
70+
},
71+
};
72+
</script>
73+
<style lang="scss" >
74+
.like {
75+
cursor: pointer;
76+
font-size: 25px;
77+
display: inline-block;
78+
}
79+
</style>
80+
```
81+
:::
82+
83+
84+
### 倒计时
85+
:::warning
86+
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
87+
88+
If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown
89+
:::
90+
:::demo Providing a future time via 'value' will enable the countdown function
91+
```html
92+
<template>
93+
<div >
94+
<el-row :gutter="20">
95+
<el-col :span="14">
96+
<div style="width: 100%; display: inline-block; ">
97+
<el-statistic :value="deadline2" timeIndices title="商品降价">
98+
<template slot="suffix">
99+
The rush is about to begin
100+
</template>
101+
</el-statistic>
102+
</div>
103+
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
104+
<el-statistic @finish="hilarity" :value="deadline3" timeIndices title="The Value of Time">
105+
<template slot="suffix">
106+
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
107+
</template>
108+
</el-statistic>
109+
</div>
110+
111+
</el-col>
112+
<el-col :span="10">
113+
<el-card shadow="hover" style="width: 100%;">
114+
<div slot="header" class="clearfix">
115+
<span>文嘉《明日歌》</span>
116+
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
117+
</div>
118+
<div style="font-size: 18px;text-align: center; " >明日复明日</div>
119+
<div style="font-size: 18px;text-align: center;" >明日何其多</div>
120+
121+
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
122+
123+
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
124+
<div style="margin-top: 40px;"></div>
125+
<el-statistic ref="statistic" @finish="hilarity" :value="deadline4" title="Distance to Tomorrow:" timeIndices > </el-statistic>
126+
</el-card>
127+
</el-col>
128+
</el-row>
129+
130+
</div>
131+
</template>
132+
133+
<script>
134+
export default {
135+
data() {
136+
return {
137+
format:'HH小时:mm:ss:SSS',
138+
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
139+
deadline2: Date.now() + 1000 * 60 * 60 * 8,
140+
deadline3: Date.now() + 1000 * 60 *30,
141+
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
142+
};
143+
},
144+
methods: {
145+
hilarity() {
146+
this.$notify({
147+
title: 'Prompt',
148+
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
149+
duration: 0
150+
});
151+
},
152+
clickFn(){
153+
this.$refs.statistic.suspend( this.stop)
154+
this.stop=!this.stop
155+
},
156+
add(){
157+
this.deadline3= this.deadline3+ 1000 * 10
158+
}
159+
}
160+
};
161+
</script>
162+
<style lang="scss" >
163+
.like {
164+
cursor: pointer;
165+
font-size: 25px;
166+
display: inline-block;
167+
}
168+
</style>
169+
```
170+
:::
171+
172+
173+
174+
175+
### Statistic Attributes
176+
177+
| Attribute | Description | Type | Accepted Values | Default |
178+
|------------- |---------------- |---------------- |---------------------- |-------- |
179+
| value | Numerical content | string \| number | - | - |
180+
| decimalSeparator | Setting the decimal point | string | - | . |
181+
| formatter | Custom numerical presentation| v-slot \|({value}) => VNode | - | - |
182+
| groupSeparator | Sets the thousandth identifier | string | - | , |
183+
| precision | numerical precision | number | - | 0 |
184+
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
185+
| suffix |Sets the suffix of a number | string \| v-slot | - | - |
186+
| title | Numeric titles | string \| v-slot | - | - |
187+
| valueStyle | Styles numeric values | style | - | - |
188+
| rate | Set the ratio | number | - | 1000 |
189+
190+
191+
### Statistic Slots
192+
| Name | Description |
193+
|------|--------|
194+
| prefix | Numeric prefix |
195+
| suffix | Suffixes for numeric values |
196+
| formatter | Numerical content |
197+
| title | Numeric titles |
198+
199+
200+
### Statistic.Countdown Attributes
201+
202+
| Attribute | Description | Type | Options | Default |
203+
|------------- |---------------- |---------------- |---------------------- |-------- |
204+
| timeIndices | Whether to enable the countdown function | boolean | true\|false | false |
205+
| value | Required value, enter the bound value | string | — | — |
206+
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
207+
### Statistic.Countdown Events
208+
| Method | Description | Parameters |
209+
|---------|--------|---------|
210+
| change | Enable in the 'countdown' function | (value: Date) |
211+
| finish | Launched after the 'countdown' is complete | (value: boolean) |
212+
213+
### Statistic Methods
214+
| Method | Description | Parameters |CallBack|
215+
| ---- | ---- | ---- |---- |
216+
| suspend | Pause the countdown|(value:boolean) |(value: Date) |
217+
218+

0 commit comments

Comments
 (0)