github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Statistic :fix doc; Optimized code; (#22384) 

* [statistic]: doc conflict modification

* [statistic]:doc Modify text

* [statistic]:Optimized code
pull/22410/head
yang 2023-08-14 17:59:47 +08:00 committed by GitHub
parent 041227db4d
commit 68e8c86d40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 338 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
examples/docs/en-US/statistic.md
View File

@ -8,25 +8,39 @@ Countdown mode
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
:::demo
```html
<template>
<div>
<el-row :gutter="20">
<el-col :span="6">
<div>
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
<el-statistic
group-separator=","
:precision="2"
:value="value2"
:title="title"
></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="Gender Distribution">
<template slot="formatter"> 456/2 </template>
<template slot="formatter">
456/2
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
<el-statistic
group-separator=","
:precision="2"
decimal-separator="."
:value="value1"
:title="title"
>
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
@ -41,7 +55,11 @@ The component provides a thousandth place display, but you can use rate to set t
<el-statistic :value="like ? 521 : 520" title="Feedback">
<template slot="suffix">
<span @click="like = !like" class="like">
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
<i
class="el-icon-star-on"
style="color:red"
v-show="!!like"
></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span>
</template>
@ -59,7 +77,7 @@ The component provides a thousandth place display, but you can use rate to set t
like: true,
value1: 4154.564,
value2: 2222,
title: 'Growth this year',
title: "Growth this year",
};
},
};
@ -75,7 +93,7 @@ The component provides a thousandth place display, but you can use rate to set t
:::
### 倒计时
### Count down
:::warning
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
@ -83,34 +101,62 @@ Suspend is tentative, it ** just pauses the countdown, not the time, because val
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
:::
:::demo Providing a future time via 'value' will enable the countdown function
```html
<template>
<div>
<el-row :gutter="20">
<el-col :span="14">
<div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" time-indices title="商品降价">
<template slot="suffix"> The rush is about to begin </template>
</el-statistic>
</div>
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
<template slot="suffix">
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
</template>
</el-statistic>
</div>
<el-card shadow="hover" style="width: 100%; ">
<div style="width: 100%; display: inline-block; ">
<el-statistic
:value="deadline2"
time-indices
title="🎉Price reduction of goods🎉"
>
<template slot="suffix">
panic purchase
</template>
</el-statistic>
</div>
</el-card>
<el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
<div style="width: 100%; display: inline-block;">
<el-statistic
@finish="hilarity"
:value="deadline3"
time-indices
title="The Value of Time"
>
<template slot="suffix">
<el-button type="primary " size="small" @click="add"
>add 10s</el-button
>
</template>
</el-statistic>
</div>
</el-card>
</el-col>
<el-col :span="10">
<el-card shadow="hover" style="width: 100%;">
<div slot="header" class="clearfix">
<span>文嘉《明日歌》</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
<span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
<el-button
style="float: right; padding: 3px 0"
type="text"
@click="clickFn"
>suspend</el-button
>
</div>
<div style="font-size: 16px;text-align: left;">
Don't sigh in the past, it is no longer back
</div>
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
Be wise to improve the present
</div>
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
To not worry not afraid of the firm will into the complicated future
</div>
<div style="font-size: 18px;text-align: center; ">明日复明日</div>
<div style="font-size: 18px;text-align: center;">明日何其多</div>
<div style="font-size: 18px;text-align: center;">我生待明日</div>
<div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
<div style="margin-top: 40px;"></div>
<el-statistic
ref="statistic"
@ -140,8 +186,9 @@ If you need to add time to the original, please note that the overall time (the
methods: {
hilarity() {
this.$notify({
title: 'Prompt',
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
title: "Prompt",
message:
"Time is up, do you know that an inch of gold can't buy an inch of time?",
duration: 0,
});
},
@ -156,6 +203,7 @@ If you need to add time to the original, please note that the overall time (the
};
</script>
```
:::
### Statistic Attributes
@ -166,7 +214,7 @@ If you need to add time to the original, please note that the overall time (the
| decimal-separator | Setting the decimal point | string | - | . |
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
| group-separator | Sets the thousandth identifier | string | - | , |
| precision | numerical precision | number | - | 0 |
| precision | numerical precision | number | - | - |
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
| title | Numeric titles | string \| v-slot | - | - |

105
examples/docs/es/statistic.md
View File

@ -8,25 +8,39 @@ Countdown mode
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
:::demo
```html
<template>
<div>
<el-row :gutter="20">
<el-col :span="6">
<div>
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
<el-statistic
group-separator=","
:precision="2"
:value="value2"
:title="title"
></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="Gender Distribution">
<template slot="formatter"> 456/2 </template>
<template slot="formatter">
456/2
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
<el-statistic
group-separator=","
:precision="2"
decimal-separator="."
:value="value1"
:title="title"
>
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
@ -41,7 +55,11 @@ The component provides a thousandth place display, but you can use rate to set t
<el-statistic :value="like ? 521 : 520" title="Feedback">
<template slot="suffix">
<span @click="like = !like" class="like">
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
<i
class="el-icon-star-on"
style="color:red"
v-show="!!like"
></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span>
</template>
@ -59,7 +77,7 @@ The component provides a thousandth place display, but you can use rate to set t
like: true,
value1: 4154.564,
value2: 2222,
title: 'Growth this year',
title: "Growth this year",
};
},
};
@ -72,44 +90,73 @@ The component provides a thousandth place display, but you can use rate to set t
}
</style>
```
:::
### 倒计时
### Count down
:::warning
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
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
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
:::
:::demo Providing a future time via 'value' will enable the countdown function
```html
<template>
<div>
<el-row :gutter="20">
<el-col :span="14">
<div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" time-indices title="商品降价">
<template slot="suffix"> The rush is about to begin </template>
</el-statistic>
</div>
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
<template slot="suffix">
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
</template>
</el-statistic>
</div>
<el-card shadow="hover" style="width: 100%; ">
<div style="width: 100%; display: inline-block; ">
<el-statistic
:value="deadline2"
time-indices
title="🎉Price reduction of goods🎉"
>
<template slot="suffix">
panic purchase
</template>
</el-statistic>
</div>
</el-card>
<el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
<div style="width: 100%; display: inline-block;">
<el-statistic
@finish="hilarity"
:value="deadline3"
time-indices
title="The Value of Time"
>
<template slot="suffix">
<el-button type="primary " size="small" @click="add"
>add 10s</el-button
>
</template>
</el-statistic>
</div>
</el-card>
</el-col>
<el-col :span="10">
<el-card shadow="hover" style="width: 100%;">
<div slot="header" class="clearfix">
<span>文嘉《明日歌》</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
<span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
<el-button
style="float: right; padding: 3px 0"
type="text"
@click="clickFn"
>suspend</el-button
>
</div>
<div style="font-size: 16px;text-align: left;">
Don't sigh in the past, it is no longer back
</div>
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
Be wise to improve the present
</div>
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
To not worry not afraid of the firm will into the complicated future
</div>
<div style="font-size: 18px;text-align: center; ">明日复明日</div>
<div style="font-size: 18px;text-align: center;">明日何其多</div>
<div style="font-size: 18px;text-align: center;">我生待明日</div>
<div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
<div style="margin-top: 40px;"></div>
<el-statistic
ref="statistic"
@ -139,8 +186,9 @@ If you need to add time to the original, please note that the overall time (the
methods: {
hilarity() {
this.$notify({
title: 'Prompt',
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
title: "Prompt",
message:
"Time is up, do you know that an inch of gold can't buy an inch of time?",
duration: 0,
});
},
@ -155,6 +203,7 @@ If you need to add time to the original, please note that the overall time (the
};
</script>
```
:::
### Statistic Attributes
@ -165,7 +214,7 @@ If you need to add time to the original, please note that the overall time (the
| decimal-separator | Setting the decimal point | string | - | . |
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
| group-separator | Sets the thousandth identifier | string | - | , |
| precision | numerical precision | number | - | 0 |
| precision | numerical precision | number | - | - |
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
| title | Numeric titles | string \| v-slot | - | - |

102
examples/docs/fr-FR/statistic.md
View File

@ -8,25 +8,39 @@ Countdown mode
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
:::demo
```html
<template>
<div>
<el-row :gutter="20">
<el-col :span="6">
<div>
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
<el-statistic
group-separator=","
:precision="2"
:value="value2"
:title="title"
></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="Gender Distribution">
<template slot="formatter"> 456/2 </template>
<template slot="formatter">
456/2
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
<el-statistic
group-separator=","
:precision="2"
decimal-separator="."
:value="value1"
:title="title"
>
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
@ -41,7 +55,11 @@ The component provides a thousandth place display, but you can use rate to set t
<el-statistic :value="like ? 521 : 520" title="Feedback">
<template slot="suffix">
<span @click="like = !like" class="like">
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
<i
class="el-icon-star-on"
style="color:red"
v-show="!!like"
></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span>
</template>
@ -59,7 +77,7 @@ The component provides a thousandth place display, but you can use rate to set t
like: true,
value1: 4154.564,
value2: 2222,
title: 'Growth this year',
title: "Growth this year",
};
},
};
@ -75,7 +93,7 @@ The component provides a thousandth place display, but you can use rate to set t
:::
### 倒计时
### Count down
:::warning
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
@ -83,34 +101,62 @@ Suspend is tentative, it ** just pauses the countdown, not the time, because val
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
:::
:::demo Providing a future time via 'value' will enable the countdown function
```html
<template>
<div>
<el-row :gutter="20">
<el-col :span="14">
<div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" time-indices title="商品降价">
<template slot="suffix"> The rush is about to begin </template>
</el-statistic>
</div>
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
<template slot="suffix">
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
</template>
</el-statistic>
</div>
<el-card shadow="hover" style="width: 100%; ">
<div style="width: 100%; display: inline-block; ">
<el-statistic
:value="deadline2"
time-indices
title="🎉Price reduction of goods🎉"
>
<template slot="suffix">
panic purchase
</template>
</el-statistic>
</div>
</el-card>
<el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
<div style="width: 100%; display: inline-block;">
<el-statistic
@finish="hilarity"
:value="deadline3"
time-indices
title="The Value of Time"
>
<template slot="suffix">
<el-button type="primary " size="small" @click="add"
>add 10s</el-button
>
</template>
</el-statistic>
</div>
</el-card>
</el-col>
<el-col :span="10">
<el-card shadow="hover" style="width: 100%;">
<div slot="header" class="clearfix">
<span>文嘉《明日歌》</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
<span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
<el-button
style="float: right; padding: 3px 0"
type="text"
@click="clickFn"
>suspend</el-button
>
</div>
<div style="font-size: 16px;text-align: left;">
Don't sigh in the past, it is no longer back
</div>
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
Be wise to improve the present
</div>
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
To not worry not afraid of the firm will into the complicated future
</div>
<div style="font-size: 18px;text-align: center; ">明日复明日</div>
<div style="font-size: 18px;text-align: center;">明日何其多</div>
<div style="font-size: 18px;text-align: center;">我生待明日</div>
<div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
<div style="margin-top: 40px;"></div>
<el-statistic
ref="statistic"
@ -140,8 +186,9 @@ If you need to add time to the original, please note that the overall time (the
methods: {
hilarity() {
this.$notify({
title: 'Prompt',
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
title: "Prompt",
message:
"Time is up, do you know that an inch of gold can't buy an inch of time?",
duration: 0,
});
},
@ -156,6 +203,7 @@ If you need to add time to the original, please note that the overall time (the
};
</script>
```
:::
### Statistic Attributes
@ -166,7 +214,7 @@ If you need to add time to the original, please note that the overall time (the
| decimal-separator | Setting the decimal point | string | - | . |
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
| group-separator | Sets the thousandth identifier | string | - | , |
| precision | numerical precision | number | - | 0 |
| precision | numerical precision | number | - | - |
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
| title | Numeric titles | string \| v-slot | - | - |

101
examples/docs/zh-CN/statistic.md
View File

@ -8,25 +8,39 @@
组件提供千分位的展示，不过可以通过 rate 来设置相应万分位等
:::demo
```html
<template>
<div>
<el-row :gutter="20">
<el-col :span="6">
<div>
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
<el-statistic
group-separator=","
:precision="2"
:value="value2"
:title="title"
></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="男女比">
<template slot="formatter"> 456/2 </template>
<template slot="formatter">
456/2
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
<el-statistic
group-separator=","
:precision="2"
decimal-separator="."
:value="value1"
:title="title"
>
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
@ -41,7 +55,11 @@
<el-statistic :value="like ? 521 : 520" title="Feedback">
<template slot="suffix">
<span @click="like = !like" class="like">
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
<i
class="el-icon-star-on"
style="color:red"
v-show="!!like"
></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span>
</template>
@ -58,8 +76,8 @@
return {
like: true,
value1: 4154.564,
value2: 2222,
title: '今年的增长',
value2: 1314,
title: "增长人数",
};
},
};
@ -72,6 +90,7 @@
}
</style>
```
:::
### 倒计时
@ -80,35 +99,67 @@
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
:::
:::demo 通过 `value` 提供未来的时间，将开启倒计时功能
```html
<template>
<div>
<el-row :gutter="20">
<el-col :span="14">
<div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" time-indices title="商品降价">
<template slot="suffix"> 抢购即将开始 </template>
</el-statistic>
</div>
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
<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>
</el-statistic>
</div>
<el-card shadow="hover" style="width: 100%;">
<div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
<template slot="suffix">
抢购即将开始
</template>
</el-statistic>
</div>
</el-card>
<el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
<div style="width: 100%; display: inline-block; ">
<el-statistic
@finish="hilarity"
:value="deadline3"
time-indices
title="时间游戏"
>
<template slot="suffix">
<el-button type="primary " size="mini" @click="add"
>add 10s</el-button
>
</template>
</el-statistic>
</div>
</el-card>
<el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
<div style="width: 100%; display: inline-block;">
<el-statistic
format="DD天HH小时mm分钟"
:value="deadline5"
time-indices
title="🚩距离立夏还有："
>
</el-statistic>
</div>
</el-card>
</el-col>
<el-col :span="10">
<el-card shadow="hover" style="width: 100%;">
<div slot="header" class="clearfix">
<span>文嘉《明日歌》</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
<el-button
style="float: right; padding: 3px 0"
type="text"
@click="clickFn"
>暂停</el-button
>
</div>
<div style="font-size: 18px;text-align: center; margin-top: 35px;">
明日复明日
</div>
<div style="font-size: 18px;text-align: center; ">明日复明日</div>
<div style="font-size: 18px;text-align: center;">明日何其多</div>
<div style="font-size: 18px;text-align: center;">我生待明日</div>
<div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
<div style="margin-top: 40px;"></div>
<div style="margin-top: 35px;"></div>
<el-statistic
ref="statistic"
@finish="hilarity"
@ -131,14 +182,15 @@
deadline2: Date.now() + 1000 * 60 * 60 * 8,
deadline3: Date.now() + 1000 * 60 * 30,
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
deadline5: new Date("2023-05-06"),
stop: true,
};
},
methods: {
hilarity() {
this.$notify({
title: '提示',
message: '时间已到，你可知寸金难买寸光阴？',
title: "提示",
message: "时间已到",
duration: 0,
});
},
@ -153,6 +205,7 @@
};
</script>
```
:::
### Statistic Attributes
@ -163,7 +216,7 @@
| decimal-separator | 设置小数点 | string | — | . |
| formatter | 自定义数值展示 | v-slot \|({value}) => VNode | — | — |
| group-separator | 设置千分位标识符 | string | — | , |
| precision | 数值精度 | number | — | 0 |
| precision | 数值精度 | number | — | — |
| prefix | 设置数值的前缀 | string \| v-slot | — | — |
| suffix | 设置数值的后缀 | string \| v-slot | — | — |
| title | 数值的标题 | string \| v-slot | — | — |

24
examples/nav.config.json
View File

@ -506,6 +506,10 @@
{
"path": "/result",
"title": "Result"
},
{
"path": "/statistic",
"title": "Statistic"
}
]
},
@ -625,10 +629,6 @@
{
"path": "/drawer",
"title": "Drawer"
},
{
"path": "/statistic",
"title": "Statistic"
}
]
}
@ -824,6 +824,10 @@
{
"path": "/result",
"title": "Result"
},
{
"path": "/statistic",
"title": "Statistic"
}
]
},
@ -943,10 +947,6 @@
{
"path": "/drawer",
"title": "Drawer"
},
{
"path": "/statistic",
"title": "Statistic"
}
]
}
@ -1142,6 +1142,10 @@
{
"path": "/result",
"title": "Result"
},
{
"path": "/statistic",
"title": "Statistic"
}
]
},
@ -1261,10 +1265,6 @@
{
"path": "/drawer",
"title": "Drawer"
},
{
"path": "/statistic",
"title": "Statistic"
}
]
}

47
packages/statistic/src/main.vue
View File

@ -50,7 +50,7 @@ export default {
default: null
},
value: {
type: [String, Number],
type: [String, Number, Date],
default: ''
},
prefix: {
@ -90,43 +90,40 @@ export default {
watch: {
value: function() {
this.branch();
},
groupSeparator() {
this.dispose();
},
mulriple() {
this.dispose();
}
},
methods: {
branch() {
let { timeIndices, countDown, dispose} = this;
timeIndices ? countDown() : dispose();
if (timeIndices) {
countDown(this.value.valueOf() || this.value);
} else {
dispose();
}
},
magnification(num, mulriple = 1000, groupSeparator = ',') {
// magnification factor
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);
return result;
const level = String(mulriple).length ;
return num.replace(new RegExp(`(\\d)(?=(\\d{${level - 1}})+$)`, 'g'), `$1${groupSeparator}`);
},
dispose() {
let { value, precision, groupSeparator, rate } = this;
let { value, rate, groupSeparator } = this;
if (!isNumber(value)) return false;
let [integer, decimal] = String(value).split('.');
if (precision) {
decimal = `${decimal || ''}${(1)
.toFixed(precision)
.replace('.', '')
.slice(1)}`;
decimal = decimal.slice(0, precision);
if (this.precision) {
value = value.toFixed(this.precision);
}
let result = 0;
let [integer, decimal] = String(value).split('.');
// 1000 multiplying power
if (groupSeparator) {
integer = this.magnification(integer, rate, groupSeparator);
}
result = [integer, decimal].join(
decimal ? this.decimalSeparator : ''
);
let result = `${integer}${decimal ? this.decimalSeparator + decimal : ''}`;
this.disposeValue = result;
return result;
},
@ -188,12 +185,12 @@ export default {
}
return result;
},
countDown() {
let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend} = this;
countDown(timeVlaue) {
let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend } = this;
if (timeTask) return;
let than = this;
this.timeTask = setInterval(()=> {
let diffTiem = diffDate(than.value, Date.now());
let diffTiem = diffDate(timeVlaue, Date.now());
than.disposeValue = formatTimeStr(diffTiem);
stopTime(diffTiem);
}, REFRESH_INTERVAL);