mirror of https://github.com/ElemeFE/element
Statistic :fix doc; Optimized code; (#22384)
* [statistic]: doc conflict modification * [statistic]:doc Modify text * [statistic]:Optimized codepull/22410/head
yang
GitHub
parent
041227db4d
commit
68e8c86d40
|
|
@ -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
|
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
|
||||||
:::demo
|
:::demo
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<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>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic title="Gender Distribution">
|
<el-statistic title="Gender Distribution">
|
||||||
<template slot="formatter"> 456/2 </template>
|
<template slot="formatter">
|
||||||
|
456/2
|
||||||
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<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">
|
<template slot="prefix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
</template>
|
</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">
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<span @click="like = !like" class="like">
|
<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>
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -59,7 +77,7 @@ The component provides a thousandth place display, but you can use rate to set t
|
||||||
like: true,
|
like: true,
|
||||||
value1: 4154.564,
|
value1: 4154.564,
|
||||||
value2: 2222,
|
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
|
:::warning
|
||||||
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
|
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
|
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
|
:::demo Providing a future time via 'value' will enable the countdown function
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="14">
|
<el-col :span="14">
|
||||||
<div style="width: 100%; display: inline-block; ">
|
<el-card shadow="hover" style="width: 100%; ">
|
||||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
<div style="width: 100%; display: inline-block; ">
|
||||||
<template slot="suffix"> The rush is about to begin </template>
|
<el-statistic
|
||||||
</el-statistic>
|
:value="deadline2"
|
||||||
</div>
|
time-indices
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
title="🎉Price reduction of goods🎉"
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
>
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
panic purchase
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</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>
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>文嘉《明日歌》</span>
|
<span style="font-size: 14px;">Henry·Wadsworth·Longfellow</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"
|
||||||
|
>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>
|
||||||
<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: 40px;"></div>
|
||||||
<el-statistic
|
<el-statistic
|
||||||
ref="statistic"
|
ref="statistic"
|
||||||
|
|
@ -140,8 +186,9 @@ If you need to add time to the original, please note that the overall time (the
|
||||||
methods: {
|
methods: {
|
||||||
hilarity() {
|
hilarity() {
|
||||||
this.$notify({
|
this.$notify({
|
||||||
title: 'Prompt',
|
title: "Prompt",
|
||||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
message:
|
||||||
|
"Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||||
duration: 0,
|
duration: 0,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
@ -156,6 +203,7 @@ If you need to add time to the original, please note that the overall time (the
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### Statistic Attributes
|
### 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 | - | . |
|
| decimal-separator | Setting the decimal point | string | - | . |
|
||||||
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
||||||
| group-separator | Sets the thousandth identifier | string | - | , |
|
| 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 | - | - |
|
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
|
||||||
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
||||||
| title | Numeric titles | string \| v-slot | - | - |
|
| title | Numeric titles | string \| v-slot | - | - |
|
||||||
|
|
|
||||||
|
|
@ -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
|
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
|
||||||
:::demo
|
:::demo
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<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>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic title="Gender Distribution">
|
<el-statistic title="Gender Distribution">
|
||||||
<template slot="formatter"> 456/2 </template>
|
<template slot="formatter">
|
||||||
|
456/2
|
||||||
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<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">
|
<template slot="prefix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
</template>
|
</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">
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<span @click="like = !like" class="like">
|
<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>
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -59,7 +77,7 @@ The component provides a thousandth place display, but you can use rate to set t
|
||||||
like: true,
|
like: true,
|
||||||
value1: 4154.564,
|
value1: 4154.564,
|
||||||
value2: 2222,
|
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>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### 倒计时
|
### Count down
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
|
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
|
:::demo Providing a future time via 'value' will enable the countdown function
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="14">
|
<el-col :span="14">
|
||||||
<div style="width: 100%; display: inline-block; ">
|
<el-card shadow="hover" style="width: 100%; ">
|
||||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
<div style="width: 100%; display: inline-block; ">
|
||||||
<template slot="suffix"> The rush is about to begin </template>
|
<el-statistic
|
||||||
</el-statistic>
|
:value="deadline2"
|
||||||
</div>
|
time-indices
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
title="🎉Price reduction of goods🎉"
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
>
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
panic purchase
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</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>
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>文嘉《明日歌》</span>
|
<span style="font-size: 14px;">Henry·Wadsworth·Longfellow</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"
|
||||||
|
>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>
|
||||||
<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: 40px;"></div>
|
||||||
<el-statistic
|
<el-statistic
|
||||||
ref="statistic"
|
ref="statistic"
|
||||||
|
|
@ -139,8 +186,9 @@ If you need to add time to the original, please note that the overall time (the
|
||||||
methods: {
|
methods: {
|
||||||
hilarity() {
|
hilarity() {
|
||||||
this.$notify({
|
this.$notify({
|
||||||
title: 'Prompt',
|
title: "Prompt",
|
||||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
message:
|
||||||
|
"Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||||
duration: 0,
|
duration: 0,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
@ -155,6 +203,7 @@ If you need to add time to the original, please note that the overall time (the
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### Statistic Attributes
|
### 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 | - | . |
|
| decimal-separator | Setting the decimal point | string | - | . |
|
||||||
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
||||||
| group-separator | Sets the thousandth identifier | string | - | , |
|
| 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 | - | - |
|
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
|
||||||
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
||||||
| title | Numeric titles | string \| v-slot | - | - |
|
| title | Numeric titles | string \| v-slot | - | - |
|
||||||
|
|
|
||||||
|
|
@ -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
|
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
|
||||||
:::demo
|
:::demo
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<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>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic title="Gender Distribution">
|
<el-statistic title="Gender Distribution">
|
||||||
<template slot="formatter"> 456/2 </template>
|
<template slot="formatter">
|
||||||
|
456/2
|
||||||
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<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">
|
<template slot="prefix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
</template>
|
</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">
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<span @click="like = !like" class="like">
|
<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>
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -59,7 +77,7 @@ The component provides a thousandth place display, but you can use rate to set t
|
||||||
like: true,
|
like: true,
|
||||||
value1: 4154.564,
|
value1: 4154.564,
|
||||||
value2: 2222,
|
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
|
:::warning
|
||||||
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
|
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
|
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
|
:::demo Providing a future time via 'value' will enable the countdown function
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="14">
|
<el-col :span="14">
|
||||||
<div style="width: 100%; display: inline-block; ">
|
<el-card shadow="hover" style="width: 100%; ">
|
||||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
<div style="width: 100%; display: inline-block; ">
|
||||||
<template slot="suffix"> The rush is about to begin </template>
|
<el-statistic
|
||||||
</el-statistic>
|
:value="deadline2"
|
||||||
</div>
|
time-indices
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
title="🎉Price reduction of goods🎉"
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
>
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
panic purchase
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</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>
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>文嘉《明日歌》</span>
|
<span style="font-size: 14px;">Henry·Wadsworth·Longfellow</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"
|
||||||
|
>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>
|
||||||
<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: 40px;"></div>
|
||||||
<el-statistic
|
<el-statistic
|
||||||
ref="statistic"
|
ref="statistic"
|
||||||
|
|
@ -140,8 +186,9 @@ If you need to add time to the original, please note that the overall time (the
|
||||||
methods: {
|
methods: {
|
||||||
hilarity() {
|
hilarity() {
|
||||||
this.$notify({
|
this.$notify({
|
||||||
title: 'Prompt',
|
title: "Prompt",
|
||||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
message:
|
||||||
|
"Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||||
duration: 0,
|
duration: 0,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
@ -156,6 +203,7 @@ If you need to add time to the original, please note that the overall time (the
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### Statistic Attributes
|
### 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 | - | . |
|
| decimal-separator | Setting the decimal point | string | - | . |
|
||||||
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
||||||
| group-separator | Sets the thousandth identifier | string | - | , |
|
| 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 | - | - |
|
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
|
||||||
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
||||||
| title | Numeric titles | string \| v-slot | - | - |
|
| title | Numeric titles | string \| v-slot | - | - |
|
||||||
|
|
|
||||||
|
|
@ -8,25 +8,39 @@
|
||||||
|
|
||||||
组件提供千分位的展示，不过可以通过 rate 来设置相应万分位等
|
组件提供千分位的展示，不过可以通过 rate 来设置相应万分位等
|
||||||
:::demo
|
:::demo
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<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>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic title="男女比">
|
<el-statistic title="男女比">
|
||||||
<template slot="formatter"> 456/2 </template>
|
<template slot="formatter">
|
||||||
|
456/2
|
||||||
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<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">
|
<template slot="prefix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -41,7 +55,11 @@
|
||||||
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<span @click="like = !like" class="like">
|
<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>
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -58,8 +76,8 @@
|
||||||
return {
|
return {
|
||||||
like: true,
|
like: true,
|
||||||
value1: 4154.564,
|
value1: 4154.564,
|
||||||
value2: 2222,
|
value2: 1314,
|
||||||
title: '今年的增长',
|
title: "增长人数",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -72,6 +90,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### 倒计时
|
### 倒计时
|
||||||
|
|
@ -80,35 +99,67 @@
|
||||||
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
|
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
|
||||||
:::
|
:::
|
||||||
:::demo 通过 `value` 提供未来的时间，将开启倒计时功能
|
:::demo 通过 `value` 提供未来的时间，将开启倒计时功能
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="14">
|
<el-col :span="14">
|
||||||
<div style="width: 100%; display: inline-block; ">
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
<div style="width: 100%; display: inline-block; ">
|
||||||
<template slot="suffix"> 抢购即将开始 </template>
|
<el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
|
||||||
</el-statistic>
|
<template slot="suffix">
|
||||||
</div>
|
抢购即将开始
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
</template>
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="添加时间">
|
</el-statistic>
|
||||||
<template slot="suffix">
|
</div>
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
</el-card>
|
||||||
</template>
|
<el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
|
||||||
</el-statistic>
|
<div style="width: 100%; display: inline-block; ">
|
||||||
</div>
|
<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>
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>文嘉《明日歌》</span>
|
<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>
|
||||||
<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="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
|
<el-statistic
|
||||||
ref="statistic"
|
ref="statistic"
|
||||||
@finish="hilarity"
|
@finish="hilarity"
|
||||||
|
|
@ -131,14 +182,15 @@
|
||||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||||
deadline3: Date.now() + 1000 * 60 * 30,
|
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()),
|
||||||
|
deadline5: new Date("2023-05-06"),
|
||||||
stop: true,
|
stop: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
hilarity() {
|
hilarity() {
|
||||||
this.$notify({
|
this.$notify({
|
||||||
title: '提示',
|
title: "提示",
|
||||||
message: '时间已到，你可知寸金难买寸光阴？',
|
message: "时间已到",
|
||||||
duration: 0,
|
duration: 0,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
@ -153,6 +205,7 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### Statistic Attributes
|
### Statistic Attributes
|
||||||
|
|
@ -163,7 +216,7 @@
|
||||||
| decimal-separator | 设置小数点 | string | — | . |
|
| decimal-separator | 设置小数点 | string | — | . |
|
||||||
| formatter | 自定义数值展示 | v-slot \|({value}) => VNode | — | — |
|
| formatter | 自定义数值展示 | v-slot \|({value}) => VNode | — | — |
|
||||||
| group-separator | 设置千分位标识符 | string | — | , |
|
| group-separator | 设置千分位标识符 | string | — | , |
|
||||||
| precision | 数值精度 | number | — | 0 |
|
| precision | 数值精度 | number | — | — |
|
||||||
| prefix | 设置数值的前缀 | string \| v-slot | — | — |
|
| prefix | 设置数值的前缀 | string \| v-slot | — | — |
|
||||||
| suffix | 设置数值的后缀 | string \| v-slot | — | — |
|
| suffix | 设置数值的后缀 | string \| v-slot | — | — |
|
||||||
| title | 数值的标题 | string \| v-slot | — | — |
|
| title | 数值的标题 | string \| v-slot | — | — |
|
||||||
|
|
|
||||||
|
|
@ -506,6 +506,10 @@
|
||||||
{
|
{
|
||||||
"path": "/result",
|
"path": "/result",
|
||||||
"title": "Result"
|
"title": "Result"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/statistic",
|
||||||
|
"title": "Statistic"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -625,10 +629,6 @@
|
||||||
{
|
{
|
||||||
"path": "/drawer",
|
"path": "/drawer",
|
||||||
"title": "Drawer"
|
"title": "Drawer"
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/statistic",
|
|
||||||
"title": "Statistic"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -824,6 +824,10 @@
|
||||||
{
|
{
|
||||||
"path": "/result",
|
"path": "/result",
|
||||||
"title": "Result"
|
"title": "Result"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/statistic",
|
||||||
|
"title": "Statistic"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -943,10 +947,6 @@
|
||||||
{
|
{
|
||||||
"path": "/drawer",
|
"path": "/drawer",
|
||||||
"title": "Drawer"
|
"title": "Drawer"
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/statistic",
|
|
||||||
"title": "Statistic"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -1142,6 +1142,10 @@
|
||||||
{
|
{
|
||||||
"path": "/result",
|
"path": "/result",
|
||||||
"title": "Result"
|
"title": "Result"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/statistic",
|
||||||
|
"title": "Statistic"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -1261,10 +1265,6 @@
|
||||||
{
|
{
|
||||||
"path": "/drawer",
|
"path": "/drawer",
|
||||||
"title": "Drawer"
|
"title": "Drawer"
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/statistic",
|
|
||||||
"title": "Statistic"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@ export default {
|
||||||
default: null
|
default: null
|
||||||
},
|
},
|
||||||
value: {
|
value: {
|
||||||
type: [String, Number],
|
type: [String, Number, Date],
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
prefix: {
|
prefix: {
|
||||||
|
|
@ -90,43 +90,40 @@ export default {
|
||||||
watch: {
|
watch: {
|
||||||
value: function() {
|
value: function() {
|
||||||
this.branch();
|
this.branch();
|
||||||
|
},
|
||||||
|
groupSeparator() {
|
||||||
|
this.dispose();
|
||||||
|
},
|
||||||
|
mulriple() {
|
||||||
|
this.dispose();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
branch() {
|
branch() {
|
||||||
let { timeIndices, countDown, dispose} = this;
|
let { timeIndices, countDown, dispose} = this;
|
||||||
timeIndices ? countDown() : dispose();
|
if (timeIndices) {
|
||||||
|
countDown(this.value.valueOf() || this.value);
|
||||||
|
} else {
|
||||||
|
dispose();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
magnification(num, mulriple = 1000, groupSeparator = ',') {
|
magnification(num, mulriple = 1000, groupSeparator = ',') {
|
||||||
// magnification factor
|
// magnification factor
|
||||||
const level = String(mulriple).length - 1;
|
const level = String(mulriple).length ;
|
||||||
const reg = new RegExp(`\\d{1,${level}}(?=(\\d{${level}})+$)`, 'g');
|
return num.replace(new RegExp(`(\\d)(?=(\\d{${level - 1}})+$)`, 'g'), `$1${groupSeparator}`);
|
||||||
const result = String(num)
|
|
||||||
.replace(reg, '$&,')
|
|
||||||
.split(',')
|
|
||||||
.join(groupSeparator);
|
|
||||||
return result;
|
|
||||||
},
|
},
|
||||||
dispose() {
|
dispose() {
|
||||||
let { value, precision, groupSeparator, rate } = this;
|
let { value, rate, groupSeparator } = this;
|
||||||
if (!isNumber(value)) return false;
|
if (!isNumber(value)) return false;
|
||||||
let [integer, decimal] = String(value).split('.');
|
if (this.precision) {
|
||||||
if (precision) {
|
value = value.toFixed(this.precision);
|
||||||
decimal = `${decimal || ''}${(1)
|
|
||||||
.toFixed(precision)
|
|
||||||
.replace('.', '')
|
|
||||||
.slice(1)}`;
|
|
||||||
decimal = decimal.slice(0, precision);
|
|
||||||
}
|
}
|
||||||
let result = 0;
|
let [integer, decimal] = String(value).split('.');
|
||||||
// 1000 multiplying power
|
// 1000 multiplying power
|
||||||
if (groupSeparator) {
|
if (groupSeparator) {
|
||||||
integer = this.magnification(integer, rate, groupSeparator);
|
integer = this.magnification(integer, rate, groupSeparator);
|
||||||
}
|
}
|
||||||
|
let result = `${integer}${decimal ? this.decimalSeparator + decimal : ''}`;
|
||||||
result = [integer, decimal].join(
|
|
||||||
decimal ? this.decimalSeparator : ''
|
|
||||||
);
|
|
||||||
this.disposeValue = result;
|
this.disposeValue = result;
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
|
|
@ -188,12 +185,12 @@ export default {
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
countDown() {
|
countDown(timeVlaue) {
|
||||||
let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend} = this;
|
let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend } = this;
|
||||||
if (timeTask) return;
|
if (timeTask) return;
|
||||||
let than = this;
|
let than = this;
|
||||||
this.timeTask = setInterval(()=> {
|
this.timeTask = setInterval(()=> {
|
||||||
let diffTiem = diffDate(than.value, Date.now());
|
let diffTiem = diffDate(timeVlaue, Date.now());
|
||||||
than.disposeValue = formatTimeStr(diffTiem);
|
than.disposeValue = formatTimeStr(diffTiem);
|
||||||
stopTime(diffTiem);
|
stopTime(diffTiem);
|
||||||
}, REFRESH_INTERVAL);
|
}, REFRESH_INTERVAL);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue