mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-29 18:57:36 +08:00
Statistic: Update code and doc (#22276)
* Modifying Spaces Modifying Spaces * statistic：Updated countdown feature to localize lodash * statistic: optimize * Statistic：优化代码逻辑 修改中文文档 * statistic：Optimize the code logic and adjust the style
This commit is contained in:
yang
GitHub
parent
b96d6e0372
commit
c56f1d6c8c
@ -81,8 +81,6 @@ export default {
|
||||
|
||||
### 倒计时
|
||||
:::warning
|
||||
suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为value指向的是未来的时间节点**。
|
||||
|
||||
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
|
||||
:::
|
||||
:::demo 通过 `value` 提供未来的时间，将开启倒计时功能
|
||||
@ -99,7 +97,7 @@ suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为valu
|
||||
</el-statistic>
|
||||
</div>
|
||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="一寸光阴一寸金">
|
||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="添加时间">
|
||||
<template slot="suffix">
|
||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
||||
</template>
|
||||
@ -136,7 +134,8 @@ export default {
|
||||
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
|
||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||
deadline3: Date.now() + 1000 * 60 *30,
|
||||
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
|
||||
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
|
||||
stop:true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -144,7 +143,8 @@ export default {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '时间已到，你可知寸金难买寸光阴？',
|
||||
duration: 0
|
||||
duration: 0,
|
||||
|
||||
});
|
||||
},
|
||||
clickFn(){
|
||||
@ -174,16 +174,16 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| value | 数值内容 | string \| number | - | - |
|
||||
| decimal-separator | 设置小数点 | string | - | . |
|
||||
| formatter | 自定义数值展示| v-slot \|({value}) => VNode | - | - |
|
||||
| group-separator | 设置千分位标识符 | string | - | , |
|
||||
| precision | 数值精度 | number | - | 0 |
|
||||
| prefix | 设置数值的前缀 | string \| v-slot | - | - |
|
||||
| suffix |设置数值的后缀 | string \| v-slot | - | - |
|
||||
| title | 数值的标题 | string \| v-slot | - | - |
|
||||
| value-style | 设置数值的样式 | style | - | - |
|
||||
| rate | 设置倍率 | number | - | 1000 |
|
||||
| value | 数值内容 | string \| number |— | — |
|
||||
| decimal-separator | 设置小数点 | string | — | . |
|
||||
| formatter | 自定义数值展示| v-slot \|({value}) => VNode |— | — |
|
||||
| group-separator | 设置千分位标识符 | string | — | , |
|
||||
| precision | 数值精度 | number | — | 0 |
|
||||
| prefix | 设置数值的前缀 | string \| v-slot | — | — |
|
||||
| suffix |设置数值的后缀 | string \| v-slot | — | — |
|
||||
| title | 数值的标题 | string \| v-slot | — | — |
|
||||
| value-style | 设置数值的样式 | object | — | — |
|
||||
| rate | 设置倍率 | number | — | 1000 |
|
||||
|
||||
|
||||
### Statistic Slots
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="el-statistic">
|
||||
<div class="head">
|
||||
<div class="head" v-if="title">
|
||||
<slot name="title">
|
||||
<span class="title">
|
||||
{{ title }}
|
||||
@ -8,15 +8,15 @@
|
||||
</slot>
|
||||
</div>
|
||||
<div class="con">
|
||||
<span class="prefix">
|
||||
<slot name="prefix">
|
||||
<span class="prefix" v-if="!prefix">
|
||||
<slot name="prefix" >
|
||||
{{ prefix }}
|
||||
</slot>
|
||||
</span>
|
||||
<span class="number" :style="valueStyle">
|
||||
<slot name="formatter"> {{ disposeValue }}</slot>
|
||||
</span>
|
||||
<span class="suffix">
|
||||
<span class="suffix" v-if="!suffix">
|
||||
<slot name="suffix">
|
||||
{{ suffix }}
|
||||
</slot>
|
||||
@ -26,7 +26,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isNumber, ceil, fill, chain, multiply, padStart, reduce} from 'element-ui/src/utils/lodash';
|
||||
import { isNumber, chain, multiply, padStart, reduce} from 'element-ui/src/utils/lodash';
|
||||
export default {
|
||||
name: 'ElStatistic',
|
||||
data() {
|
||||
@ -47,7 +47,7 @@ export default {
|
||||
},
|
||||
precision: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: null
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
@ -97,36 +97,35 @@ export default {
|
||||
let { timeIndices, countDown, dispose} = this;
|
||||
timeIndices ? countDown() : dispose();
|
||||
},
|
||||
magnification(num, _mulriple = 1000, _groupSeparator = ',') {
|
||||
magnification(num, mulriple = 1000, groupSeparator = ',') {
|
||||
// magnification factor
|
||||
const level = String(_mulriple).length - 1;
|
||||
const level = String(mulriple).length - 1;
|
||||
const reg = new RegExp(`\\d{1,${level}}(?=(\\d{${level}})+$)`, 'g');
|
||||
const result = String(num)
|
||||
.replace(reg, '$&,')
|
||||
.split(',')
|
||||
.join(_groupSeparator);
|
||||
.join(groupSeparator);
|
||||
return result;
|
||||
},
|
||||
dispose() {
|
||||
let { value, precision, groupSeparator, rate } = this;
|
||||
|
||||
if (!isNumber(value)) return false;
|
||||
let [integer, decimal] = String(value).split('.');
|
||||
if (precision) {
|
||||
value = ceil(value, precision);
|
||||
decimal = `${decimal || ''}${(1)
|
||||
.toFixed(precision)
|
||||
.replace('.', '')
|
||||
.slice(1)}`;
|
||||
decimal = decimal.slice(0, precision);
|
||||
}
|
||||
|
||||
let integer = String(value).split('.')[0];
|
||||
let decimals =
|
||||
String(value).split('.')[1] ||
|
||||
(precision ? fill(Array(precision), 0).join('') : '');
|
||||
let result = 0;
|
||||
// 1000 multiplying power
|
||||
if (groupSeparator) {
|
||||
integer = this.magnification(integer, rate, groupSeparator);
|
||||
}
|
||||
|
||||
result = [integer, decimals].join(
|
||||
decimals ? this.decimalSeparator : ''
|
||||
result = [integer, decimal].join(
|
||||
decimal ? this.decimalSeparator : ''
|
||||
);
|
||||
this.disposeValue = result;
|
||||
return result;
|
||||
@ -140,7 +139,6 @@ export default {
|
||||
clearInterval(this.timeTask);
|
||||
this.timeTask = null;
|
||||
}
|
||||
|
||||
} else {
|
||||
this.branch();
|
||||
}
|
||||
@ -195,8 +193,7 @@ export default {
|
||||
if (timeTask) return;
|
||||
let than = this;
|
||||
this.timeTask = setInterval(()=> {
|
||||
let {value} = than;
|
||||
let diffTiem = diffDate(value, Date.now());
|
||||
let diffTiem = diffDate(than.value, Date.now());
|
||||
than.disposeValue = formatTimeStr(diffTiem);
|
||||
stopTime(diffTiem);
|
||||
}, REFRESH_INTERVAL);
|
||||
|
||||
@ -2,36 +2,37 @@
|
||||
@import "common/var";
|
||||
|
||||
@include b(statistic) {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $--color-black;
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5715;
|
||||
list-style: none;
|
||||
font-feature-settings: "tnum";
|
||||
text-align: center;
|
||||
.head {
|
||||
margin-bottom: 4px;
|
||||
color: #00000073;
|
||||
font-size: 14px;
|
||||
$statistic-justify: center;
|
||||
$statistic-align: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $--color-black;
|
||||
font-variant: tabular-nums;
|
||||
list-style: none;
|
||||
font-feature-settings: "tnum";
|
||||
text-align: center;
|
||||
.head {
|
||||
margin-bottom: 4px;
|
||||
color: $--color-text-regular;
|
||||
font-size: $--font-size-small;
|
||||
}
|
||||
|
||||
.con {
|
||||
font-family: Sans-serif;
|
||||
display: flex;
|
||||
justify-content: $statistic-justify;
|
||||
align-items: $statistic-align;
|
||||
color: $--color-text-primary;
|
||||
.number {
|
||||
font-size: $--font-size-extra-large;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.con{
|
||||
font-family: Sans-serif;
|
||||
display: flex;
|
||||
justify-content :center;
|
||||
align-items: center ;
|
||||
.number{
|
||||
font-size: 20px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
span{ display: inline-block;
|
||||
margin: 0;
|
||||
line-height: 100%;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user