Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs:[Statistic] 修复案例代码缩进；修复外语文档第二个案例中stop变量未声明bug；去除案例代码中未使用的变量和类选择器 #22383

Merged
merged 1 commit into from
Feb 12, 2023
Merged

docs:[Statistic] 修复案例代码缩进；修复外语文档第二个案例中stop变量未声明bug；去除案例代码中未使用的变量和类选择器 #22383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
312 changes: 150 additions & 162 deletions examples/docs/en-US/statistic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,82 @@
## Statistic
## Statistic

Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.

Countdown mode


### Basic usage

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>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="Gender Distribution">
<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">
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
<template slot="suffix">
<i class="el-icon-s-flag" style="color: blue"></i>
</template>
</el-statistic>
</div>

</el-col>
<el-col :span="6">
<div>
<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-off" v-show="!like"></i>
</span> </template>
</el-statistic>
</div>
</el-col>
<div>
<el-row :gutter="20">
<el-col :span="6">
<div>
<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>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<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>
<template slot="suffix">
<i class="el-icon-s-flag" style="color: blue"></i>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<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-off" v-show="!like"></i>
</span>
</template>
</el-statistic>
</div>
</el-col>
</el-row>
</div>
</template>

<script>
export default {
data() {
return {
like: true,
value1: 4154.564,
value2: 2222,
title: "Growth this year",
input: "Hello Element UI!",
};
},
};
export default {
data() {
return {
like: true,
value1: 4154.564,
value2: 2222,
title: 'Growth this year',
};
},
};
</script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
<style lang="scss">
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
```
:::

:::

### 倒计时

:::warning
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **

Expand All @@ -88,129 +85,120 @@ If you need to add time to the original, please note that the overall time (the
:::demo Providing a future time via 'value' will enable the countdown function
```html
<template>
<div >
<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-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>
</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" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="Distance to Tomorrow:" time-indices > </el-statistic>
</el-card>
</el-col>
</el-row>

<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-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>
</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"
@finish="hilarity"
format="HH:mm:ss"
:value="deadline4"
title="Distance to Tomorrow:"
time-indices
>
</el-statistic>
</el-card>
</el-col>
</el-row>
</div>
</template>

<script>
export default {
data() {
return {
format:'HH小时:mm:ss:SSS',
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
deadline2: Date.now() + 1000 * 60 * 60 * 8,
deadline3: Date.now() + 1000 * 60 *30,
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
};
},
methods: {
hilarity() {
this.$notify({
export default {
data() {
return {
deadline2: Date.now() + 1000 * 60 * 60 * 8,
deadline3: Date.now() + 1000 * 60 * 30,
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
stop: true,
};
},
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?",
duration: 0
duration: 0,
});
},
clickFn() {
this.$refs.statistic.suspend(this.stop);
this.stop = !this.stop;
},
add() {
this.deadline3 = this.deadline3 + 1000 * 10;
},
},
clickFn(){
this.$refs.statistic.suspend( this.stop)
this.stop=!this.stop
},
add(){
this.deadline3= this.deadline3+ 1000 * 10
}
}
};
};
</script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
```
:::




### Statistic Attributes

| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | Numerical content | string \| number | - | - |
| 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 |
| 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 | - | - |
| value-style | Styles numeric values | style | - | - |
| rate | Set the ratio | number | - | 1000 |

| Attribute | Description | Type | Accepted Values | Default |
| ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |
| value | Numerical content | string \| number | - | - |
| 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 |
| 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 | - | - |
| value-style | Styles numeric values | style | - | - |
| rate | Set the ratio | number | - | 1000 |

### Statistic Slots
| Name | Description |
|------|--------|
| prefix | Numeric prefix |
| suffix | Suffixes for numeric values |
| formatter | Numerical content |
| title | Numeric titles |

| Name | Description |
| --------- | --------------------------- |
| prefix | Numeric prefix |
| suffix | Suffixes for numeric values |
| formatter | Numerical content |
| title | Numeric titles |

### Statistic.Countdown Attributes
### Statistic.Countdown Attributes

| Attribute | Description | Type | Options | Default |
| ------------ | ---------------------------------------- | ------- | ----------- | ---------- |
| time-indices | Whether to enable the countdown function | boolean | true\|false | false |
| value | Required value, enter the bound value | string | — | — |
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |

| Attribute | Description | Type | Options | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| time-indices | Whether to enable the countdown function | boolean | true\|false | false |
| value | Required value, enter the bound value | string | — | — |
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
### Statistic.Countdown Events
| Method | Description | Parameters |
|---------|--------|---------|
| change | Enable in the 'countdown' function | (value: Date) |

| Method | Description | Parameters |
| ------ | ------------------------------------------ | ---------------- |
| change | Enable in the 'countdown' function | (value: Date) |
| finish | Launched after the 'countdown' is complete | (value: boolean) |

### Statistic Methods
| Method | Description | Parameters |CallBack|
| ---- | ---- | ---- |---- |
| suspend | Pause the countdown|(value:boolean) |(value: Date) |


| Method | Description | Parameters | CallBack |
| ------- | ------------------- | --------------- | ------------- |
| suspend | Pause the countdown | (value:boolean) | (value: Date) |
Loading