mirror of https://github.com/ElemeFE/element
Docs:[Statistic] update docs and fix bugs (#22383)
Limbo
GitHub
parent
43a955a280
commit
daf1349af0
|
|
@ -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.
|
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
|
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
|
||||||
<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">
|
<template slot="formatter"> 456/2 </template>
|
||||||
456/2
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
|
</el-col>
|
||||||
</el-statistic>
|
<el-col :span="6">
|
||||||
</div>
|
<div>
|
||||||
</el-col>
|
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
||||||
<el-col :span="6">
|
<template slot="prefix">
|
||||||
<div>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
</template>
|
||||||
<template slot="prefix">
|
<template slot="suffix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: blue"></i>
|
||||||
</template>
|
</template>
|
||||||
<template slot="suffix">
|
</el-statistic>
|
||||||
<i class="el-icon-s-flag" style="color: blue"></i>
|
</div>
|
||||||
</template>
|
</el-col>
|
||||||
</el-statistic>
|
<el-col :span="6">
|
||||||
</div>
|
<div>
|
||||||
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
</el-col>
|
<template slot="suffix">
|
||||||
<el-col :span="6">
|
<span @click="like = !like" class="like">
|
||||||
<div>
|
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
||||||
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
<template slot="suffix">
|
</span>
|
||||||
<span @click="like = !like" class="like">
|
</template>
|
||||||
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
</el-statistic>
|
||||||
<i class="el-icon-star-off" v-show="!like"></i>
|
</div>
|
||||||
</span> </template>
|
</el-col>
|
||||||
</el-statistic>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
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!",
|
};
|
||||||
};
|
},
|
||||||
},
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" >
|
<style lang="scss">
|
||||||
.like {
|
.like {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
</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 **
|
||||||
|
|
||||||
|
|
@ -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
|
:::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; ">
|
<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
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
</el-statistic>
|
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
||||||
</div>
|
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
<template slot="suffix">
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
||||||
<template slot="suffix">
|
</template>
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
</el-statistic>
|
</el-col>
|
||||||
</div>
|
<el-col :span="10">
|
||||||
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
</el-col>
|
<div slot="header" class="clearfix">
|
||||||
<el-col :span="10">
|
<span>文嘉《明日歌》</span>
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
||||||
<div slot="header" class="clearfix">
|
</div>
|
||||||
<span>文嘉《明日歌》</span>
|
<div style="font-size: 18px;text-align: center; ">明日复明日</div>
|
||||||
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
<div style="font-size: 18px;text-align: center;">明日何其多</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>
|
||||||
|
<el-statistic
|
||||||
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
|
ref="statistic"
|
||||||
|
@finish="hilarity"
|
||||||
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
|
format="HH:mm:ss"
|
||||||
<div style="margin-top: 40px;"></div>
|
:value="deadline4"
|
||||||
<el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="Distance to Tomorrow:" time-indices > </el-statistic>
|
title="Distance to Tomorrow:"
|
||||||
</el-card>
|
time-indices
|
||||||
</el-col>
|
>
|
||||||
</el-row>
|
</el-statistic>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
format:'HH小时:mm:ss:SSS',
|
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||||
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
|
deadline3: Date.now() + 1000 * 60 * 30,
|
||||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||||
deadline3: Date.now() + 1000 * 60 *30,
|
stop: true,
|
||||||
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
|
};
|
||||||
};
|
},
|
||||||
},
|
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,
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
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>
|
</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 | - | - |
|
||||||
| group-separator | Sets the thousandth identifier | string | - | , |
|
| group-separator | Sets the thousandth identifier | string | - | , |
|
||||||
| precision | numerical precision | number | - | 0 |
|
| precision | numerical precision | number | - | 0 |
|
||||||
| 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 | - | - |
|
||||||
| 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 |
|
|
||||||
|------|--------|
|
|
||||||
| 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
|
### 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|
|
|
||||||
| ---- | ---- | ---- |---- |
|
|
||||||
| suspend | Pause the countdown|(value:boolean) |(value: Date) |
|
|
||||||
|
|
||||||
|
|
||||||
|
| Method | Description | Parameters | CallBack |
|
||||||
|
| ------- | ------------------- | --------------- | ------------- |
|
||||||
|
| suspend | Pause the countdown | (value:boolean) | (value: Date) |
|
||||||
|
|
|
||||||
|
|
@ -1,85 +1,81 @@
|
||||||
## 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.
|
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
|
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
|
||||||
<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">
|
<template slot="formatter"> 456/2 </template>
|
||||||
456/2
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
|
</el-col>
|
||||||
</el-statistic>
|
<el-col :span="6">
|
||||||
</div>
|
<div>
|
||||||
</el-col>
|
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
||||||
<el-col :span="6">
|
<template slot="prefix">
|
||||||
<div>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
</template>
|
||||||
<template slot="prefix">
|
<template slot="suffix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: blue"></i>
|
||||||
</template>
|
</template>
|
||||||
<template slot="suffix">
|
</el-statistic>
|
||||||
<i class="el-icon-s-flag" style="color: blue"></i>
|
</div>
|
||||||
</template>
|
</el-col>
|
||||||
</el-statistic>
|
<el-col :span="6">
|
||||||
</div>
|
<div>
|
||||||
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
</el-col>
|
<template slot="suffix">
|
||||||
<el-col :span="6">
|
<span @click="like = !like" class="like">
|
||||||
<div>
|
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
||||||
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
<template slot="suffix">
|
</span>
|
||||||
<span @click="like = !like" class="like">
|
</template>
|
||||||
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
</el-statistic>
|
||||||
<i class="el-icon-star-off" v-show="!like"></i>
|
</div>
|
||||||
</span> </template>
|
</el-col>
|
||||||
</el-statistic>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
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!",
|
};
|
||||||
};
|
},
|
||||||
},
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" >
|
<style lang="scss">
|
||||||
.like {
|
.like {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
</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 **
|
||||||
|
|
||||||
|
|
@ -88,129 +84,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
|
:::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; ">
|
<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
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
</el-statistic>
|
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
||||||
</div>
|
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
<template slot="suffix">
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
||||||
<template slot="suffix">
|
</template>
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
</el-statistic>
|
</el-col>
|
||||||
</div>
|
<el-col :span="10">
|
||||||
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
</el-col>
|
<div slot="header" class="clearfix">
|
||||||
<el-col :span="10">
|
<span>文嘉《明日歌》</span>
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
||||||
<div slot="header" class="clearfix">
|
</div>
|
||||||
<span>文嘉《明日歌》</span>
|
<div style="font-size: 18px;text-align: center; ">明日复明日</div>
|
||||||
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
<div style="font-size: 18px;text-align: center;">明日何其多</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>
|
||||||
|
<el-statistic
|
||||||
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
|
ref="statistic"
|
||||||
|
@finish="hilarity"
|
||||||
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
|
format="HH:mm:ss"
|
||||||
<div style="margin-top: 40px;"></div>
|
:value="deadline4"
|
||||||
<el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="Distance to Tomorrow:" time-indices > </el-statistic>
|
title="Distance to Tomorrow:"
|
||||||
</el-card>
|
time-indices
|
||||||
</el-col>
|
>
|
||||||
</el-row>
|
</el-statistic>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
format:'HH小时:mm:ss:SSS',
|
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||||
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
|
deadline3: Date.now() + 1000 * 60 * 30,
|
||||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||||
deadline3: Date.now() + 1000 * 60 *30,
|
stop: true,
|
||||||
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
|
};
|
||||||
};
|
},
|
||||||
},
|
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,
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
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>
|
</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 | - | - |
|
||||||
| group-separator | Sets the thousandth identifier | string | - | , |
|
| group-separator | Sets the thousandth identifier | string | - | , |
|
||||||
| precision | numerical precision | number | - | 0 |
|
| precision | numerical precision | number | - | 0 |
|
||||||
| 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 | - | - |
|
||||||
| 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 |
|
|
||||||
|------|--------|
|
|
||||||
| 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
|
### 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|
|
|
||||||
| ---- | ---- | ---- |---- |
|
|
||||||
| suspend | Pause the countdown|(value:boolean) |(value: Date) |
|
|
||||||
|
|
||||||
|
|
||||||
|
| Method | Description | Parameters | CallBack |
|
||||||
|
| ------- | ------------------- | --------------- | ------------- |
|
||||||
|
| suspend | Pause the countdown | (value:boolean) | (value: Date) |
|
||||||
|
|
|
||||||
|
|
@ -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.
|
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
|
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
|
||||||
<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">
|
<template slot="formatter"> 456/2 </template>
|
||||||
456/2
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
|
</el-col>
|
||||||
</el-statistic>
|
<el-col :span="6">
|
||||||
</div>
|
<div>
|
||||||
</el-col>
|
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
||||||
<el-col :span="6">
|
<template slot="prefix">
|
||||||
<div>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
</template>
|
||||||
<template slot="prefix">
|
<template slot="suffix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: blue"></i>
|
||||||
</template>
|
</template>
|
||||||
<template slot="suffix">
|
</el-statistic>
|
||||||
<i class="el-icon-s-flag" style="color: blue"></i>
|
</div>
|
||||||
</template>
|
</el-col>
|
||||||
</el-statistic>
|
<el-col :span="6">
|
||||||
</div>
|
<div>
|
||||||
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
</el-col>
|
<template slot="suffix">
|
||||||
<el-col :span="6">
|
<span @click="like = !like" class="like">
|
||||||
<div>
|
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
||||||
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
<template slot="suffix">
|
</span>
|
||||||
<span @click="like = !like" class="like">
|
</template>
|
||||||
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
</el-statistic>
|
||||||
<i class="el-icon-star-off" v-show="!like"></i>
|
</div>
|
||||||
</span> </template>
|
</el-col>
|
||||||
</el-statistic>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
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!",
|
};
|
||||||
};
|
},
|
||||||
},
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" >
|
<style lang="scss">
|
||||||
.like {
|
.like {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
</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 **
|
||||||
|
|
||||||
|
|
@ -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
|
:::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; ">
|
<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
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
</el-statistic>
|
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
||||||
</div>
|
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
<template slot="suffix">
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
||||||
<template slot="suffix">
|
</template>
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
</el-statistic>
|
</el-col>
|
||||||
</div>
|
<el-col :span="10">
|
||||||
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
</el-col>
|
<div slot="header" class="clearfix">
|
||||||
<el-col :span="10">
|
<span>文嘉《明日歌》</span>
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
||||||
<div slot="header" class="clearfix">
|
</div>
|
||||||
<span>文嘉《明日歌》</span>
|
<div style="font-size: 18px;text-align: center; ">明日复明日</div>
|
||||||
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
<div style="font-size: 18px;text-align: center;">明日何其多</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>
|
||||||
|
<el-statistic
|
||||||
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
|
ref="statistic"
|
||||||
|
@finish="hilarity"
|
||||||
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
|
format="HH:mm:ss"
|
||||||
<div style="margin-top: 40px;"></div>
|
:value="deadline4"
|
||||||
<el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="Distance to Tomorrow:" time-indices > </el-statistic>
|
title="Distance to Tomorrow:"
|
||||||
</el-card>
|
time-indices
|
||||||
</el-col>
|
>
|
||||||
</el-row>
|
</el-statistic>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
format:'HH小时:mm:ss:SSS',
|
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||||
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
|
deadline3: Date.now() + 1000 * 60 * 30,
|
||||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||||
deadline3: Date.now() + 1000 * 60 *30,
|
stop: true,
|
||||||
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
|
};
|
||||||
};
|
},
|
||||||
},
|
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,
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
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>
|
</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 | - | - |
|
||||||
| group-separator | Sets the thousandth identifier | string | - | , |
|
| group-separator | Sets the thousandth identifier | string | - | , |
|
||||||
| precision | numerical precision | number | - | 0 |
|
| precision | numerical precision | number | - | 0 |
|
||||||
| 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 | - | - |
|
||||||
| 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 |
|
|
||||||
|------|--------|
|
|
||||||
| 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
|
### 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|
|
|
||||||
| ---- | ---- | ---- |---- |
|
|
||||||
| suspend | Pause the countdown|(value:boolean) |(value: Date) |
|
|
||||||
|
|
||||||
|
|
||||||
|
| Method | Description | Parameters | CallBack |
|
||||||
|
| ------- | ------------------- | --------------- | ------------- |
|
||||||
|
| suspend | Pause the countdown | (value:boolean) | (value: Date) |
|
||||||
|
|
|
||||||
|
|
@ -1,216 +1,201 @@
|
||||||
## Statistic 统计数值
|
## Statistic 统计数值
|
||||||
|
|
||||||
用于突出某个或某组数字时，如显示数值，如金额，排名等。
|
用于突出某个或某组数字时，如显示数值，如金额，排名等。
|
||||||
|
|
||||||
倒计时模式
|
倒计时模式
|
||||||
|
|
||||||
|
### 基础用法
|
||||||
|
|
||||||
### 基础用法
|
组件提供千分位的展示，不过可以通过 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">
|
<template slot="formatter"> 456/2 </template>
|
||||||
456/2
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
|
</el-col>
|
||||||
</el-statistic>
|
<el-col :span="6">
|
||||||
</div>
|
<div>
|
||||||
</el-col>
|
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
||||||
<el-col :span="6">
|
<template slot="prefix">
|
||||||
<div>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
</template>
|
||||||
<template slot="prefix">
|
<template slot="suffix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: blue"></i>
|
||||||
</template>
|
</template>
|
||||||
<template slot="suffix">
|
</el-statistic>
|
||||||
<i class="el-icon-s-flag" style="color: blue"></i>
|
</div>
|
||||||
</template>
|
</el-col>
|
||||||
</el-statistic>
|
<el-col :span="6">
|
||||||
</div>
|
<div>
|
||||||
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
</el-col>
|
<template slot="suffix">
|
||||||
<el-col :span="6">
|
<span @click="like = !like" class="like">
|
||||||
<div>
|
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
||||||
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
<template slot="suffix">
|
</span>
|
||||||
<span @click="like = !like" class="like">
|
</template>
|
||||||
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
</el-statistic>
|
||||||
<i class="el-icon-star-off" v-show="!like"></i>
|
</div>
|
||||||
</span> </template>
|
</el-col>
|
||||||
</el-statistic>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
like: true,
|
like: true,
|
||||||
value1: 4154.564,
|
value1: 4154.564,
|
||||||
value2: 2222,
|
value2: 2222,
|
||||||
title: "今年的增长",
|
title: '今年的增长',
|
||||||
input: "Hello Element UI!",
|
};
|
||||||
};
|
},
|
||||||
},
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" >
|
<style lang="scss">
|
||||||
.like {
|
.like {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
### 倒计时
|
### 倒计时
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
|
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
|
||||||
:::
|
:::
|
||||||
:::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; ">
|
<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>
|
||||||
抢购即将开始
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
</el-statistic>
|
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
||||||
</div>
|
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="添加时间">
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
<template slot="suffix">
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="添加时间">
|
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
||||||
<template slot="suffix">
|
</template>
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
</el-statistic>
|
||||||
</template>
|
</div>
|
||||||
</el-statistic>
|
</el-col>
|
||||||
</div>
|
<el-col :span="10">
|
||||||
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
</el-col>
|
<div slot="header" class="clearfix">
|
||||||
<el-col :span="10">
|
<span>文嘉《明日歌》</span>
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
||||||
<div slot="header" class="clearfix">
|
</div>
|
||||||
<span>文嘉《明日歌》</span>
|
<div style="font-size: 18px;text-align: center; ">明日复明日</div>
|
||||||
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
<div style="font-size: 18px;text-align: center;">明日何其多</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>
|
||||||
|
<el-statistic
|
||||||
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
|
ref="statistic"
|
||||||
|
@finish="hilarity"
|
||||||
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
|
format="HH:mm:ss"
|
||||||
<div style="margin-top: 40px;"></div>
|
:value="deadline4"
|
||||||
<el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="距离明日：" time-indices > </el-statistic>
|
title="距离明日："
|
||||||
</el-card>
|
time-indices
|
||||||
</el-col>
|
>
|
||||||
</el-row>
|
</el-statistic>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
format:'HH小时:mm:ss:SSS',
|
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||||
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
|
deadline3: Date.now() + 1000 * 60 * 30,
|
||||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||||
deadline3: Date.now() + 1000 * 60 *30,
|
stop: true,
|
||||||
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
|
};
|
||||||
stop:true
|
},
|
||||||
};
|
methods: {
|
||||||
},
|
hilarity() {
|
||||||
methods: {
|
this.$notify({
|
||||||
hilarity() {
|
|
||||||
this.$notify({
|
|
||||||
title: '提示',
|
title: '提示',
|
||||||
message: '时间已到，你可知寸金难买寸光阴？',
|
message: '时间已到，你可知寸金难买寸光阴？',
|
||||||
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>
|
</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 | — | — |
|
||||||
| group-separator | 设置千分位标识符 | string | — | , |
|
| group-separator | 设置千分位标识符 | string | — | , |
|
||||||
| precision | 数值精度 | number | — | 0 |
|
| precision | 数值精度 | number | — | 0 |
|
||||||
| prefix | 设置数值的前缀 | string \| v-slot | — | — |
|
| prefix | 设置数值的前缀 | string \| v-slot | — | — |
|
||||||
| suffix |设置数值的后缀 | string \| v-slot | — | — |
|
| suffix | 设置数值的后缀 | string \| v-slot | — | — |
|
||||||
| title | 数值的标题 | string \| v-slot | — | — |
|
| title | 数值的标题 | string \| v-slot | — | — |
|
||||||
| value-style | 设置数值的样式 | object | — | — |
|
| value-style | 设置数值的样式 | object | — | — |
|
||||||
| rate | 设置倍率 | number | — | 1000 |
|
| rate | 设置倍率 | number | — | 1000 |
|
||||||
|
|
||||||
|
|
||||||
### Statistic Slots
|
### Statistic Slots
|
||||||
| name | 说明 |
|
|
||||||
|------|--------|
|
|
||||||
| prefix | 数值的前缀 |
|
|
||||||
| suffix | 数值的后缀 |
|
|
||||||
| formatter | 数值内容 |
|
|
||||||
| title | 数值的标题 |
|
|
||||||
|
|
||||||
|
| name | 说明 |
|
||||||
|
| --------- | ---------- |
|
||||||
|
| prefix | 数值的前缀 |
|
||||||
|
| suffix | 数值的后缀 |
|
||||||
|
| formatter | 数值内容 |
|
||||||
|
| title | 数值的标题 |
|
||||||
|
|
||||||
### Statistic.Countdown Attributes
|
### Statistic.Countdown Attributes
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
| ------------ | ------------------ | ------- | ----------- | ---------- |
|
||||||
|
| time-indices | 是否开启倒计时功能 | boolean | true\|false | false |
|
||||||
|
| value | 必填值，输入绑定值 | string | — | — |
|
||||||
|
| format | 格式化倒计时展示 | string | — | 'HH:mm:ss' |
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
||||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
|
||||||
| time-indices | 是否开启倒计时功能 | boolean | true\|false | false |
|
|
||||||
| value | 必填值，输入绑定值 | string | — | — |
|
|
||||||
| format | 格式化倒计时展示 | string | — | 'HH:mm:ss' |
|
|
||||||
### Statistic.Countdown Events
|
### Statistic.Countdown Events
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
|
||||||
|---------|--------|---------|
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
| change | 在`倒计时`的功能中开启 | (value: Date) |
|
| -------- | ---------------------- | ---------------- |
|
||||||
| finish | 在`倒计时` 完成后启动 | (value: boolean) |
|
| change | 在`倒计时`的功能中开启 | (value: Date) |
|
||||||
|
| finish | 在`倒计时` 完成后启动 | (value: boolean) |
|
||||||
|
|
||||||
### Statistic Methods
|
### Statistic Methods
|
||||||
| 方法名 | 说明 | 参数 |回调参数|
|
|
||||||
| ---- | ---- | ---- |---- |
|
|
||||||
| suspend | 暂停倒计时|(value:boolean) |(value: Date) |
|
|
||||||
|
|
||||||
|
|
||||||
|
| 方法名 | 说明 | 参数 | 回调参数 |
|
||||||
|
| ------- | ---------- | --------------- | ------------- |
|
||||||
|
| suspend | 暂停倒计时 | (value:boolean) | (value: Date) |
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue