Docs:[Statistic] update docs and fix bugs (#22383)

pull/22381/head
Limbo 2023-02-12 18:43:32 +08:00 committed by GitHub
parent 43a955a280
commit daf1349af0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 599 additions and 651 deletions

View File

@ -4,8 +4,8 @@ Used to highlight a certain number or group of numbers, such as showing a numeri
Countdown mode Countdown mode
### Basic usage ### Basic usage
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
@ -20,10 +20,7 @@ The component provides a thousandth place display, but you can use rate to set t
<el-col :span="6"> <el-col :span="6">
<div> <div>
<el-statistic title="Gender Distribution"> <el-statistic title="Gender Distribution">
<template slot="formatter"> <template slot="formatter"> 456/2 </template>
456/2
</template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
@ -38,7 +35,6 @@ The component provides a thousandth place display, but you can use rate to set t
</template> </template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div> <div>
@ -47,7 +43,8 @@ The component provides a thousandth place display, but you can use rate to set t
<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> </template> </span>
</template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
@ -62,8 +59,7 @@ export default {
like: true, like: true,
value1: 4154.564, value1: 4154.564,
value2: 2222, value2: 2222,
title: "Growth this year", title: 'Growth this year',
input: "Hello Element UI!",
}; };
}, },
}; };
@ -76,10 +72,11 @@ export default {
} }
</style> </style>
``` ```
::: :::
### 倒计时 ### 倒计时
:::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 **
@ -93,9 +90,7 @@ If you need to add time to the original, please note that the overall time (the
<el-col :span="14"> <el-col :span="14">
<div style="width: 100%; display: inline-block; "> <div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" time-indices title="商品降价"> <el-statistic :value="deadline2" time-indices title="商品降价">
<template slot="suffix"> <template slot="suffix"> The rush is about to begin </template>
The rush is about to begin
</template>
</el-statistic> </el-statistic>
</div> </div>
<div style="width: 100%; display: inline-block; margin-top: 50px; "> <div style="width: 100%; display: inline-block; margin-top: 50px; ">
@ -105,7 +100,6 @@ If you need to add time to the original, please note that the overall time (the
</template> </template>
</el-statistic> </el-statistic>
</div> </div>
</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%;">
@ -115,16 +109,21 @@ If you need to add time to the original, please note that the overall time (the
</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="font-size: 18px;text-align: center;">万事成蹉跎</div>
<div style="margin-top: 40px;"></div> <div style="margin-top: 40px;"></div>
<el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="Distance to Tomorrow:" time-indices > </el-statistic> <el-statistic
ref="statistic"
@finish="hilarity"
format="HH:mm:ss"
:value="deadline4"
title="Distance to Tomorrow:"
time-indices
>
</el-statistic>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
@ -132,11 +131,10 @@ If you need to add time to the original, please note that the overall time (the
export default { export default {
data() { data() {
return { return {
format:'HH小时:mm:ss:SSS',
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
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()),
stop: true,
}; };
}, },
methods: { methods: {
@ -144,36 +142,26 @@ export default {
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,
}); });
}, },
clickFn() { clickFn() {
this.$refs.statistic.suspend( this.stop) this.$refs.statistic.suspend(this.stop);
this.stop=!this.stop this.stop = !this.stop;
}, },
add() { add() {
this.deadline3= this.deadline3+ 1000 * 10 this.deadline3 = this.deadline3 + 1000 * 10;
} },
} },
}; };
</script> </script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
``` ```
::: :::
### Statistic Attributes ### Statistic Attributes
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- | | ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |
| value | Numerical content | string \| number | - | - | | value | Numerical content | string \| number | - | - |
| 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 | - | - |
@ -185,32 +173,32 @@ export default {
| value-style | Styles numeric values | style | - | - | | value-style | Styles numeric values | style | - | - |
| rate | Set the ratio | number | - | 1000 | | rate | Set the ratio | number | - | 1000 |
### Statistic Slots ### Statistic Slots
| Name | Description | | Name | Description |
|------|--------| | --------- | --------------------------- |
| prefix | Numeric prefix | | prefix | Numeric prefix |
| suffix | Suffixes for numeric values | | suffix | Suffixes for numeric values |
| formatter | Numerical content | | formatter | Numerical content |
| title | Numeric titles | | title | Numeric titles |
### Statistic.Countdown Attributes ### Statistic.Countdown Attributes
| Attribute | Description | Type | Options | Default | | Attribute | Description | Type | Options | Default |
|------------- |---------------- |---------------- |---------------------- |-------- | | ------------ | ---------------------------------------- | ------- | ----------- | ---------- |
| time-indices | Whether to enable the countdown function | boolean | true\|false | false | | time-indices | Whether to enable the countdown function | boolean | true\|false | false |
| value | Required value, enter the bound value | string | — | — | | value | Required value, enter the bound value | string | — | — |
| format | Formatting the countdown display | string | — | 'HH:mm:ss' | | format | Formatting the countdown display | string | — | 'HH:mm:ss' |
### Statistic.Countdown Events ### Statistic.Countdown Events
| Method | Description | Parameters | | Method | Description | Parameters |
|---------|--------|---------| | ------ | ------------------------------------------ | ---------------- |
| change | Enable in the 'countdown' function | (value: Date) | | change | Enable in the 'countdown' function | (value: Date) |
| finish | Launched after the 'countdown' is complete | (value: boolean) | | finish | Launched after the 'countdown' is complete | (value: boolean) |
### Statistic Methods ### Statistic Methods
| Method | Description | Parameters | CallBack | | Method | Description | Parameters | CallBack |
| ---- | ---- | ---- |---- | | ------- | ------------------- | --------------- | ------------- |
| suspend | Pause the countdown | (value:boolean) | (value: Date) | | suspend | Pause the countdown | (value:boolean) | (value: Date) |

View File

@ -4,8 +4,8 @@ Used to highlight a certain number or group of numbers, such as showing a numeri
Countdown mode Countdown mode
### Basic usage ### Basic usage
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
@ -20,10 +20,7 @@ The component provides a thousandth place display, but you can use rate to set t
<el-col :span="6"> <el-col :span="6">
<div> <div>
<el-statistic title="Gender Distribution"> <el-statistic title="Gender Distribution">
<template slot="formatter"> <template slot="formatter"> 456/2 </template>
456/2
</template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
@ -38,7 +35,6 @@ The component provides a thousandth place display, but you can use rate to set t
</template> </template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div> <div>
@ -47,7 +43,8 @@ The component provides a thousandth place display, but you can use rate to set t
<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> </template> </span>
</template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
@ -62,8 +59,7 @@ export default {
like: true, like: true,
value1: 4154.564, value1: 4154.564,
value2: 2222, value2: 2222,
title: "Growth this year", title: 'Growth this year',
input: "Hello Element UI!",
}; };
}, },
}; };
@ -78,8 +74,8 @@ export default {
``` ```
::: :::
### 倒计时 ### 倒计时
:::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 **
@ -93,9 +89,7 @@ If you need to add time to the original, please note that the overall time (the
<el-col :span="14"> <el-col :span="14">
<div style="width: 100%; display: inline-block; "> <div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" time-indices title="商品降价"> <el-statistic :value="deadline2" time-indices title="商品降价">
<template slot="suffix"> <template slot="suffix"> The rush is about to begin </template>
The rush is about to begin
</template>
</el-statistic> </el-statistic>
</div> </div>
<div style="width: 100%; display: inline-block; margin-top: 50px; "> <div style="width: 100%; display: inline-block; margin-top: 50px; ">
@ -105,7 +99,6 @@ If you need to add time to the original, please note that the overall time (the
</template> </template>
</el-statistic> </el-statistic>
</div> </div>
</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%;">
@ -115,16 +108,21 @@ If you need to add time to the original, please note that the overall time (the
</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="font-size: 18px;text-align: center;">万事成蹉跎</div>
<div style="margin-top: 40px;"></div> <div style="margin-top: 40px;"></div>
<el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="Distance to Tomorrow:" time-indices > </el-statistic> <el-statistic
ref="statistic"
@finish="hilarity"
format="HH:mm:ss"
:value="deadline4"
title="Distance to Tomorrow:"
time-indices
>
</el-statistic>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
@ -132,11 +130,10 @@ If you need to add time to the original, please note that the overall time (the
export default { export default {
data() { data() {
return { return {
format:'HH小时:mm:ss:SSS',
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
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()),
stop: true,
}; };
}, },
methods: { methods: {
@ -144,36 +141,26 @@ export default {
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,
}); });
}, },
clickFn() { clickFn() {
this.$refs.statistic.suspend( this.stop) this.$refs.statistic.suspend(this.stop);
this.stop=!this.stop this.stop = !this.stop;
}, },
add() { add() {
this.deadline3= this.deadline3+ 1000 * 10 this.deadline3 = this.deadline3 + 1000 * 10;
} },
} },
}; };
</script> </script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
``` ```
::: :::
### Statistic Attributes ### Statistic Attributes
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- | | ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |
| value | Numerical content | string \| number | - | - | | value | Numerical content | string \| number | - | - |
| 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 | - | - |
@ -185,32 +172,32 @@ export default {
| value-style | Styles numeric values | style | - | - | | value-style | Styles numeric values | style | - | - |
| rate | Set the ratio | number | - | 1000 | | rate | Set the ratio | number | - | 1000 |
### Statistic Slots ### Statistic Slots
| Name | Description | | Name | Description |
|------|--------| | --------- | --------------------------- |
| prefix | Numeric prefix | | prefix | Numeric prefix |
| suffix | Suffixes for numeric values | | suffix | Suffixes for numeric values |
| formatter | Numerical content | | formatter | Numerical content |
| title | Numeric titles | | title | Numeric titles |
### Statistic.Countdown Attributes ### Statistic.Countdown Attributes
| Attribute | Description | Type | Options | Default | | Attribute | Description | Type | Options | Default |
|------------- |---------------- |---------------- |---------------------- |-------- | | ------------ | ---------------------------------------- | ------- | ----------- | ---------- |
| time-indices | Whether to enable the countdown function | boolean | true\|false | false | | time-indices | Whether to enable the countdown function | boolean | true\|false | false |
| value | Required value, enter the bound value | string | — | — | | value | Required value, enter the bound value | string | — | — |
| format | Formatting the countdown display | string | — | 'HH:mm:ss' | | format | Formatting the countdown display | string | — | 'HH:mm:ss' |
### Statistic.Countdown Events ### Statistic.Countdown Events
| Method | Description | Parameters | | Method | Description | Parameters |
|---------|--------|---------| | ------ | ------------------------------------------ | ---------------- |
| change | Enable in the 'countdown' function | (value: Date) | | change | Enable in the 'countdown' function | (value: Date) |
| finish | Launched after the 'countdown' is complete | (value: boolean) | | finish | Launched after the 'countdown' is complete | (value: boolean) |
### Statistic Methods ### Statistic Methods
| Method | Description | Parameters | CallBack | | Method | Description | Parameters | CallBack |
| ---- | ---- | ---- |---- | | ------- | ------------------- | --------------- | ------------- |
| suspend | Pause the countdown | (value:boolean) | (value: Date) | | suspend | Pause the countdown | (value:boolean) | (value: Date) |

View File

@ -4,8 +4,8 @@ Used to highlight a certain number or group of numbers, such as showing a numeri
Countdown mode Countdown mode
### Basic usage ### Basic usage
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
@ -20,10 +20,7 @@ The component provides a thousandth place display, but you can use rate to set t
<el-col :span="6"> <el-col :span="6">
<div> <div>
<el-statistic title="Gender Distribution"> <el-statistic title="Gender Distribution">
<template slot="formatter"> <template slot="formatter"> 456/2 </template>
456/2
</template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
@ -38,7 +35,6 @@ The component provides a thousandth place display, but you can use rate to set t
</template> </template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div> <div>
@ -47,7 +43,8 @@ The component provides a thousandth place display, but you can use rate to set t
<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> </template> </span>
</template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
@ -62,8 +59,7 @@ export default {
like: true, like: true,
value1: 4154.564, value1: 4154.564,
value2: 2222, value2: 2222,
title: "Growth this year", title: 'Growth this year',
input: "Hello Element UI!",
}; };
}, },
}; };
@ -76,10 +72,11 @@ export default {
} }
</style> </style>
``` ```
::: :::
### 倒计时 ### 倒计时
:::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 **
@ -93,9 +90,7 @@ If you need to add time to the original, please note that the overall time (the
<el-col :span="14"> <el-col :span="14">
<div style="width: 100%; display: inline-block; "> <div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" time-indices title="商品降价"> <el-statistic :value="deadline2" time-indices title="商品降价">
<template slot="suffix"> <template slot="suffix"> The rush is about to begin </template>
The rush is about to begin
</template>
</el-statistic> </el-statistic>
</div> </div>
<div style="width: 100%; display: inline-block; margin-top: 50px; "> <div style="width: 100%; display: inline-block; margin-top: 50px; ">
@ -105,7 +100,6 @@ If you need to add time to the original, please note that the overall time (the
</template> </template>
</el-statistic> </el-statistic>
</div> </div>
</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%;">
@ -115,16 +109,21 @@ If you need to add time to the original, please note that the overall time (the
</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="font-size: 18px;text-align: center;">万事成蹉跎</div>
<div style="margin-top: 40px;"></div> <div style="margin-top: 40px;"></div>
<el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="Distance to Tomorrow:" time-indices > </el-statistic> <el-statistic
ref="statistic"
@finish="hilarity"
format="HH:mm:ss"
:value="deadline4"
title="Distance to Tomorrow:"
time-indices
>
</el-statistic>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
@ -132,11 +131,10 @@ If you need to add time to the original, please note that the overall time (the
export default { export default {
data() { data() {
return { return {
format:'HH小时:mm:ss:SSS',
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
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()),
stop: true,
}; };
}, },
methods: { methods: {
@ -144,36 +142,26 @@ export default {
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,
}); });
}, },
clickFn() { clickFn() {
this.$refs.statistic.suspend( this.stop) this.$refs.statistic.suspend(this.stop);
this.stop=!this.stop this.stop = !this.stop;
}, },
add() { add() {
this.deadline3= this.deadline3+ 1000 * 10 this.deadline3 = this.deadline3 + 1000 * 10;
} },
} },
}; };
</script> </script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
``` ```
::: :::
### Statistic Attributes ### Statistic Attributes
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- | | ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |
| value | Numerical content | string \| number | - | - | | value | Numerical content | string \| number | - | - |
| 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 | - | - |
@ -185,32 +173,32 @@ export default {
| value-style | Styles numeric values | style | - | - | | value-style | Styles numeric values | style | - | - |
| rate | Set the ratio | number | - | 1000 | | rate | Set the ratio | number | - | 1000 |
### Statistic Slots ### Statistic Slots
| Name | Description | | Name | Description |
|------|--------| | --------- | --------------------------- |
| prefix | Numeric prefix | | prefix | Numeric prefix |
| suffix | Suffixes for numeric values | | suffix | Suffixes for numeric values |
| formatter | Numerical content | | formatter | Numerical content |
| title | Numeric titles | | title | Numeric titles |
### Statistic.Countdown Attributes ### Statistic.Countdown Attributes
| Attribute | Description | Type | Options | Default | | Attribute | Description | Type | Options | Default |
|------------- |---------------- |---------------- |---------------------- |-------- | | ------------ | ---------------------------------------- | ------- | ----------- | ---------- |
| time-indices | Whether to enable the countdown function | boolean | true\|false | false | | time-indices | Whether to enable the countdown function | boolean | true\|false | false |
| value | Required value, enter the bound value | string | — | — | | value | Required value, enter the bound value | string | — | — |
| format | Formatting the countdown display | string | — | 'HH:mm:ss' | | format | Formatting the countdown display | string | — | 'HH:mm:ss' |
### Statistic.Countdown Events ### Statistic.Countdown Events
| Method | Description | Parameters | | Method | Description | Parameters |
|---------|--------|---------| | ------ | ------------------------------------------ | ---------------- |
| change | Enable in the 'countdown' function | (value: Date) | | change | Enable in the 'countdown' function | (value: Date) |
| finish | Launched after the 'countdown' is complete | (value: boolean) | | finish | Launched after the 'countdown' is complete | (value: boolean) |
### Statistic Methods ### Statistic Methods
| Method | Description | Parameters | CallBack | | Method | Description | Parameters | CallBack |
| ---- | ---- | ---- |---- | | ------- | ------------------- | --------------- | ------------- |
| suspend | Pause the countdown | (value:boolean) | (value: Date) | | suspend | Pause the countdown | (value:boolean) | (value: Date) |

View File

@ -4,8 +4,8 @@
倒计时模式 倒计时模式
### 基础用法 ### 基础用法
组件提供千分位的展示,不过可以通过 rate 来设置相应万分位等 组件提供千分位的展示,不过可以通过 rate 来设置相应万分位等
:::demo :::demo
```html ```html
@ -20,10 +20,7 @@
<el-col :span="6"> <el-col :span="6">
<div> <div>
<el-statistic title="男女比"> <el-statistic title="男女比">
<template slot="formatter"> <template slot="formatter"> 456/2 </template>
456/2
</template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
@ -38,7 +35,6 @@
</template> </template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div> <div>
@ -47,7 +43,8 @@
<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> </template> </span>
</template>
</el-statistic> </el-statistic>
</div> </div>
</el-col> </el-col>
@ -62,8 +59,7 @@ export default {
like: true, like: true,
value1: 4154.564, value1: 4154.564,
value2: 2222, value2: 2222,
title: "今年的增长", title: '今年的增长',
input: "Hello Element UI!",
}; };
}, },
}; };
@ -78,8 +74,8 @@ export default {
``` ```
::: :::
### 倒计时 ### 倒计时
:::warning :::warning
如果需要在原基础上添加时间,请注意:整体的时间(添加的时间量和原定时间)必须是**未来**的时间节点,否则依旧是倒计时结束 如果需要在原基础上添加时间,请注意:整体的时间(添加的时间量和原定时间)必须是**未来**的时间节点,否则依旧是倒计时结束
::: :::
@ -91,9 +87,7 @@ export default {
<el-col :span="14"> <el-col :span="14">
<div style="width: 100%; display: inline-block; "> <div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" time-indices title="商品降价"> <el-statistic :value="deadline2" time-indices title="商品降价">
<template slot="suffix"> <template slot="suffix"> 抢购即将开始 </template>
抢购即将开始
</template>
</el-statistic> </el-statistic>
</div> </div>
<div style="width: 100%; display: inline-block; margin-top: 50px; "> <div style="width: 100%; display: inline-block; margin-top: 50px; ">
@ -103,7 +97,6 @@ export default {
</template> </template>
</el-statistic> </el-statistic>
</div> </div>
</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%;">
@ -113,16 +106,21 @@ export default {
</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="font-size: 18px;text-align: center;">万事成蹉跎</div>
<div style="margin-top: 40px;"></div> <div style="margin-top: 40px;"></div>
<el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="距离明日:" time-indices > </el-statistic> <el-statistic
ref="statistic"
@finish="hilarity"
format="HH:mm:ss"
:value="deadline4"
title="距离明日:"
time-indices
>
</el-statistic>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
@ -130,12 +128,10 @@ export default {
export default { export default {
data() { data() {
return { return {
format:'HH小时:mm:ss:SSS',
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
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()),
stop:true stop: true,
}; };
}, },
methods: { methods: {
@ -144,36 +140,25 @@ export default {
title: '提示', title: '提示',
message: '时间已到,你可知寸金难买寸光阴?', message: '时间已到,你可知寸金难买寸光阴?',
duration: 0, duration: 0,
}); });
}, },
clickFn() { clickFn() {
this.$refs.statistic.suspend( this.stop) this.$refs.statistic.suspend(this.stop);
this.stop=!this.stop this.stop = !this.stop;
}, },
add() { add() {
this.deadline3= this.deadline3+ 1000 * 10 this.deadline3 = this.deadline3 + 1000 * 10;
} },
} },
}; };
</script> </script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
``` ```
::: :::
### Statistic Attributes ### Statistic Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | | ----------------- | ---------------- | --------------------------- | ------ | ------ |
| value | 数值内容 | string \| number | — | — | | value | 数值内容 | string \| number | — | — |
| decimal-separator | 设置小数点 | string | — | . | | decimal-separator | 设置小数点 | string | — | . |
| formatter | 自定义数值展示 | v-slot \|({value}) => VNode | — | — | | formatter | 自定义数值展示 | v-slot \|({value}) => VNode | — | — |
@ -185,32 +170,32 @@ export default {
| value-style | 设置数值的样式 | object | — | — | | value-style | 设置数值的样式 | object | — | — |
| rate | 设置倍率 | number | — | 1000 | | rate | 设置倍率 | number | — | 1000 |
### Statistic Slots ### Statistic Slots
| name | 说明 | | name | 说明 |
|------|--------| | --------- | ---------- |
| prefix | 数值的前缀 | | prefix | 数值的前缀 |
| suffix | 数值的后缀 | | suffix | 数值的后缀 |
| formatter | 数值内容 | | formatter | 数值内容 |
| title | 数值的标题 | | title | 数值的标题 |
### Statistic.Countdown Attributes ### Statistic.Countdown Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | | ------------ | ------------------ | ------- | ----------- | ---------- |
| time-indices | 是否开启倒计时功能 | boolean | true\|false | false | | time-indices | 是否开启倒计时功能 | boolean | true\|false | false |
| value | 必填值,输入绑定值 | string | — | — | | value | 必填值,输入绑定值 | string | — | — |
| format | 格式化倒计时展示 | string | — | 'HH:mm:ss' | | format | 格式化倒计时展示 | string | — | 'HH:mm:ss' |
### Statistic.Countdown Events ### Statistic.Countdown Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|---------|--------|---------| | -------- | ---------------------- | ---------------- |
| change | 在`倒计时`的功能中开启 | (value: Date) | | change | 在`倒计时`的功能中开启 | (value: Date) |
| finish | 在`倒计时` 完成后启动 | (value: boolean) | | finish | 在`倒计时` 完成后启动 | (value: boolean) |
### Statistic Methods ### Statistic Methods
| 方法名 | 说明 | 参数 | 回调参数 | | 方法名 | 说明 | 参数 | 回调参数 |
| ---- | ---- | ---- |---- | | ------- | ---------- | --------------- | ------------- |
| suspend | 暂停倒计时 | (value:boolean) | (value: Date) | | suspend | 暂停倒计时 | (value:boolean) | (value: Date) |