Skip to content

Commit 220fdb3

Browse files
webvs2Simon-He95
webvs2
authored and
Simon-He95
committed
Statistic: Update code and doc (ElemeFE#22276)
* Modifying Spaces Modifying Spaces * statistic：Updated countdown feature to localize lodash * statistic: optimize * Statistic：优化代码逻辑 修改中文文档 * statistic：Optimize the code logic and adjust the style
1 parent 86c4660 commit 220fdb3

File tree

3 files changed

+64
-66
lines changed

3 files changed

+64
-66
lines changed

‎examples/docs/zh-CN/statistic.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,6 @@ export default {
8181

8282
### 倒计时
8383
:::warning
84-
suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为value指向的是未来的时间节点**。
85-
8684
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
8785
:::
8886
:::demo 通过 `value` 提供未来的时间，将开启倒计时功能
@@ -99,7 +97,7 @@ suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为valu
9997
</el-statistic>
10098
</div>
10199
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
102-
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="一寸光阴一寸金">
100+
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="添加时间">
103101
<template slot="suffix">
104102
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
105103
</template>
@@ -136,15 +134,17 @@ export default {
136134
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
137135
deadline2: Date.now() + 1000 * 60 * 60 * 8,
138136
deadline3: Date.now() + 1000 * 60 *30,
139-
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
137+
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
138+
stop:true
140139
};
141140
},
142141
methods: {
143142
hilarity() {
144143
this.$notify({
145144
title: '提示',
146145
message: '时间已到，你可知寸金难买寸光阴？',
147-
duration: 0
146+
duration: 0,
147+
148148
});
149149
},
150150
clickFn(){
@@ -174,16 +174,16 @@ export default {
174174

175175
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
176176
|------------- |---------------- |---------------- |---------------------- |-------- |
177-
| value | 数值内容 | string \| number | - | - |
178-
| decimal-separator | 设置小数点 | string | - | . |
179-
| formatter | 自定义数值展示| v-slot \|({value}) => VNode | - | - |
180-
| group-separator | 设置千分位标识符 | string | - | , |
181-
| precision | 数值精度 | number | - | 0 |
182-
| prefix | 设置数值的前缀 | string \| v-slot | - | - |
183-
| suffix |设置数值的后缀 | string \| v-slot | - | - |
184-
| title | 数值的标题 | string \| v-slot | - | - |
185-
| value-style | 设置数值的样式 | style | - | - |
186-
| rate | 设置倍率 | number | - | 1000 |
177+
| value | 数值内容 | string \| number |— | — |
178+
| decimal-separator | 设置小数点 | string | — | . |
179+
| formatter | 自定义数值展示| v-slot \|({value}) => VNode |— | — |
180+
| group-separator | 设置千分位标识符 | string | — | , |
181+
| precision | 数值精度 | number | — | 0 |
182+
| prefix | 设置数值的前缀 | string \| v-slot | — | — |
183+
| suffix |设置数值的后缀 | string \| v-slot | — | — |
184+
| title | 数值的标题 | string \| v-slot | — | — |
185+
| value-style | 设置数值的样式 | object | — | — |
186+
| rate | 设置倍率 | number | — | 1000 |
187187

188188

189189
### Statistic Slots

‎packages/statistic/src/main.vue

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<template>
22
<div class="el-statistic">
3-
<div class="head">
3+
<div class="head" v-if="title">
44
<slot name="title">
55
<span class="title">
66
{{ title }}
77
</span>
88
</slot>
99
</div>
1010
<div class="con">
11-
<span class="prefix">
12-
<slot name="prefix">
11+
<span class="prefix" v-if="!prefix">
12+
<slot name="prefix" >
1313
{{ prefix }}
1414
</slot>
1515
</span>
1616
<span class="number" :style="valueStyle">
1717
<slot name="formatter"> {{ disposeValue }}</slot>
1818
</span>
19-
<span class="suffix">
19+
<span class="suffix" v-if="!suffix">
2020
<slot name="suffix">
2121
{{ suffix }}
2222
</slot>
@@ -26,7 +26,7 @@
2626
</template>
2727

2828
<script>
29-
import { isNumber, ceil, fill, chain, multiply, padStart, reduce} from 'element-ui/src/utils/lodash';
29+
import { isNumber, chain, multiply, padStart, reduce} from 'element-ui/src/utils/lodash';
3030
export default {
3131
name: 'ElStatistic',
3232
data() {
@@ -47,7 +47,7 @@ export default {
4747
},
4848
precision: {
4949
type: Number,
50-
default: 0
50+
default: null
5151
},
5252
value: {
5353
type: [String, Number],
@@ -97,36 +97,35 @@ export default {
9797
let { timeIndices, countDown, dispose} = this;
9898
timeIndices ? countDown() : dispose();
9999
},
100-
magnification(num, _mulriple = 1000, _groupSeparator = ',') {
100+
magnification(num, mulriple = 1000, groupSeparator = ',') {
101101
// magnification factor
102-
const level = String(_mulriple).length - 1;
102+
const level = String(mulriple).length - 1;
103103
const reg = new RegExp(`\\d{1,${level}}(?=(\\d{${level}})+$)`, 'g');
104104
const result = String(num)
105105
.replace(reg, '$&,')
106106
.split(',')
107-
.join(_groupSeparator);
107+
.join(groupSeparator);
108108
return result;
109109
},
110110
dispose() {
111111
let { value, precision, groupSeparator, rate } = this;
112-
113112
if (!isNumber(value)) return false;
113+
let [integer, decimal] = String(value).split('.');
114114
if (precision) {
115-
value = ceil(value, precision);
115+
decimal = `${decimal || ''}${(1)
116+
.toFixed(precision)
117+
.replace('.', '')
118+
.slice(1)}`;
119+
decimal = decimal.slice(0, precision);
116120
}
117-
118-
let integer = String(value).split('.')[0];
119-
let decimals =
120-
String(value).split('.')[1] ||
121-
(precision ? fill(Array(precision), 0).join('') : '');
122121
let result = 0;
123122
// 1000 multiplying power
124123
if (groupSeparator) {
125124
integer = this.magnification(integer, rate, groupSeparator);
126125
}
127126
128-
result = [integer, decimals].join(
129-
decimals ? this.decimalSeparator : ''
127+
result = [integer, decimal].join(
128+
decimal ? this.decimalSeparator : ''
130129
);
131130
this.disposeValue = result;
132131
return result;
@@ -140,7 +139,6 @@ export default {
140139
clearInterval(this.timeTask);
141140
this.timeTask = null;
142141
}
143-
144142
} else {
145143
this.branch();
146144
}
@@ -195,8 +193,7 @@ export default {
195193
if (timeTask) return;
196194
let than = this;
197195
this.timeTask = setInterval(()=> {
198-
let {value} = than;
199-
let diffTiem = diffDate(value, Date.now());
196+
let diffTiem = diffDate(than.value, Date.now());
200197
than.disposeValue = formatTimeStr(diffTiem);
201198
stopTime(diffTiem);
202199
}, REFRESH_INTERVAL);

‎packages/theme-chalk/src/statistic.scss

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,37 @@
22
@import "common/var";
33

44
@include b(statistic) {
5-
width: 100%;
6-
box-sizing: border-box;
7-
margin: 0;
8-
padding: 0;
9-
color: $--color-black;
10-
font-size: 14px;
11-
font-variant: tabular-nums;
12-
line-height: 1.5715;
13-
list-style: none;
14-
font-feature-settings: "tnum";
15-
text-align: center;
16-
.head {
17-
margin-bottom: 4px;
18-
color: #00000073;
19-
font-size: 14px;
5+
$statistic-justify: center;
6+
$statistic-align: center;
7+
width: 100%;
8+
box-sizing: border-box;
9+
margin: 0;
10+
padding: 0;
11+
color: $--color-black;
12+
font-variant: tabular-nums;
13+
list-style: none;
14+
font-feature-settings: "tnum";
15+
text-align: center;
16+
.head {
17+
margin-bottom: 4px;
18+
color: $--color-text-regular;
19+
font-size: $--font-size-small;
20+
}
2021

22+
.con {
23+
font-family: Sans-serif;
24+
display: flex;
25+
justify-content: $statistic-justify;
26+
align-items: $statistic-align;
27+
color: $--color-text-primary;
28+
.number {
29+
font-size: $--font-size-extra-large;
30+
padding: 0 4px;
2131
}
22-
23-
.con{
24-
font-family: Sans-serif;
25-
display: flex;
26-
justify-content :center;
27-
align-items: center ;
28-
.number{
29-
font-size: 20px;
30-
padding: 0 4px;
31-
}
32-
span{ display: inline-block;
33-
margin: 0;
34-
line-height: 100%;
35-
}
32+
span {
33+
display: inline-block;
34+
margin: 0;
35+
line-height: 100%;
3636
}
37-
}
37+
}
38+
}

0 commit comments

Comments
 (0)