mirror of https://github.com/ElemeFE/element
Merge branch 'ElemeFE:dev' into dev
cpf23333
GitHub
commit
4720c9282b
|
|
@ -1,5 +1,6 @@
|
|||
src/utils/popper.js
|
||||
src/utils/date.js
|
||||
src/utils/lodash.js
|
||||
examples/play
|
||||
*.sh
|
||||
node_modules
|
||||
|
|
|
|||
|
|
@ -1,5 +1,34 @@
|
|||
## Changelog
|
||||
|
||||
### 2.15.12
|
||||
|
||||
*2022-11-16*
|
||||
|
||||
#### Bug fixes
|
||||
- Statistic：
|
||||
- Fixed the thousandth bit bug (#22252 by @webvs2)
|
||||
- Other
|
||||
- Fix 2.15.11 element-theme-chalk publish fail bug
|
||||
|
||||
### 2.15.11
|
||||
|
||||
*2022-11-15*
|
||||
|
||||
#### Bug fixes
|
||||
- Docs
|
||||
- Fix Radio docs (#22178 by @bchen1029)
|
||||
- Fix Progress docs
|
||||
#### Optimization
|
||||
- I18n
|
||||
- Update translation of Malaysian (#22185 by @z4q)
|
||||
- Update translation of Norwegian (#22145 by @Barsnes)
|
||||
- Progress
|
||||
- Add defineBackColor and textColor prop (#22089 by @lm312)
|
||||
- Statistics
|
||||
- Add new component Statistics (#22159 by @webvs2)
|
||||
- Other
|
||||
- Add Web Types to improve code assistance in WebStorm IDE and other JetBrains IDEs (#22135 by @piotrtomiak)
|
||||
|
||||
### 2.15.10
|
||||
|
||||
*2022-09-13*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,34 @@
|
|||
## Changelog
|
||||
|
||||
### 2.15.12
|
||||
|
||||
*2022-11-16*
|
||||
|
||||
#### Bug fixes
|
||||
- Statistic：
|
||||
- Fixed the thousandth bit bug (#22252 by @webvs2)
|
||||
- Other
|
||||
- Fix 2.15.11 element-theme-chalk publish fail bug
|
||||
|
||||
### 2.15.11
|
||||
|
||||
*2022-11-15*
|
||||
|
||||
#### Bug fixes
|
||||
- Docs
|
||||
- Fix Radio docs (#22178 by @bchen1029)
|
||||
- Fix Progress docs
|
||||
#### Optimization
|
||||
- I18n
|
||||
- Update translation of Malaysian (#22185 by @z4q)
|
||||
- Update translation of Norwegian (#22145 by @Barsnes)
|
||||
- Progress
|
||||
- Add defineBackColor and textColor prop (#22089 by @lm312)
|
||||
- Statistics
|
||||
- Add new component Statistics (#22159 by @webvs2)
|
||||
- Other
|
||||
- Add Web Types to improve code assistance in WebStorm IDE and other JetBrains IDEs (#22135 by @piotrtomiak)
|
||||
|
||||
### 2.15.10
|
||||
|
||||
*2022-09-13*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,34 @@
|
|||
## Changelog
|
||||
|
||||
### 2.15.12
|
||||
|
||||
*2022-11-16*
|
||||
|
||||
#### Bug fixes
|
||||
- Statistic：
|
||||
- Fixed the thousandth bit bug (#22252 by @webvs2)
|
||||
- Other
|
||||
- Fix 2.15.11 element-theme-chalk publish fail bug
|
||||
|
||||
### 2.15.11
|
||||
|
||||
*2022-11-15*
|
||||
|
||||
#### Bug fixes
|
||||
- Docs
|
||||
- Fix Radio docs (#22178 by @bchen1029)
|
||||
- Fix Progress docs
|
||||
#### Optimization
|
||||
- I18n
|
||||
- Update translation of Malaysian (#22185 by @z4q)
|
||||
- Update translation of Norwegian (#22145 by @Barsnes)
|
||||
- Progress
|
||||
- Add defineBackColor and textColor prop (#22089 by @lm312)
|
||||
- Statistics
|
||||
- Add new component Statistics (#22159 by @webvs2)
|
||||
- Other
|
||||
- Add Web Types to improve code assistance in WebStorm IDE and other JetBrains IDEs (#22135 by @piotrtomiak)
|
||||
|
||||
### 2.15.10
|
||||
|
||||
*2022-09-13*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,34 @@
|
|||
## 更新日志
|
||||
|
||||
### 2.15.12
|
||||
|
||||
*2022-11-16*
|
||||
|
||||
#### Bug 修复
|
||||
- Statistics
|
||||
- 修改 千分位 问题 (#22252 by @webvs2)
|
||||
- 其他
|
||||
- 修复 2.15.11版本element-theme-chalk未成功发布 问题
|
||||
|
||||
### 2.15.11
|
||||
|
||||
*2022-11-15*
|
||||
|
||||
#### Bug 修复
|
||||
- Docs
|
||||
- 修复 Radio 文案 (#22178 by @bchen1029)
|
||||
- 修复 Progress 文案
|
||||
#### 优化
|
||||
- I18n
|
||||
- 更新 马来西亚语 翻译 (#22185 by @z4q)
|
||||
- 更新 挪威语 翻译 (#22145 by @Barsnes)
|
||||
- Progress
|
||||
- 新增 defineBackColor 和 textColor 属性 (#22089 by @lm312)
|
||||
- Statistics
|
||||
- 新增组件 Statistics (#22159 by @webvs2)
|
||||
- Other
|
||||
- 改进WebStorm IDE和其他JetBrains IDE中的代码帮助 (#22135 by @piotrtomiak)
|
||||
|
||||
### 2.15.10
|
||||
|
||||
*2022-09-13*
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
Element will stay with Vue 2.x
|
||||
|
||||
For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus) from the same team (Element Plus is a community develop project)
|
||||
For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus)(Element Plus is a community develop project)
|
||||
|
||||
## Links
|
||||
- Homepage and documentation
|
||||
|
|
|
|||
|
|
@ -46,4 +46,4 @@ exports.vue = {
|
|||
amd: 'vue'
|
||||
};
|
||||
|
||||
exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date\.js/;
|
||||
exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date\.js|utils\/lodash\.js/;
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@
|
|||
"cascader-panel": "./packages/cascader-panel/index.js",
|
||||
"avatar": "./packages/avatar/index.js",
|
||||
"drawer": "./packages/drawer/index.js",
|
||||
"statistic": "./packages/statistic/index.js",
|
||||
"popconfirm": "./packages/popconfirm/index.js",
|
||||
"skeleton": "./packages/skeleton/index.js",
|
||||
"skeleton-item": "./packages/skeleton-item/index.js",
|
||||
|
|
|
|||
|
|
@ -171,4 +171,6 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
|
|||
| width | the canvas width of circle progress bar | number | — | 126 |
|
||||
| show-text | whether to show percentage | boolean | — | true |
|
||||
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
|
||||
| format | custom text format | function(percentage) | — | — |
|
||||
| format | custom text format | function(percentage) | — | — |
|
||||
| define-back-color | background color of progress bar (hex format) | string | — | — |
|
||||
| text-color | text color of progress bar (hex format) | string | — | — |
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
## 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>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
like: true,
|
||||
value1: 4154.564,
|
||||
value2: 2222,
|
||||
title: "Growth this year",
|
||||
input: "Hello Element UI!",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<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 **
|
||||
|
||||
If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown
|
||||
:::
|
||||
:::demo Providing a future time via 'value' will enable the countdown function
|
||||
```html
|
||||
<template>
|
||||
<div >
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="14">
|
||||
<div style="width: 100%; display: inline-block; ">
|
||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
||||
<template slot="suffix">
|
||||
The rush is about to begin
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
||||
<template slot="suffix">
|
||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
|
||||
</el-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({
|
||||
title: 'Prompt',
|
||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||
duration: 0
|
||||
});
|
||||
},
|
||||
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 |
|
||||
|
||||
|
||||
### Statistic Slots
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| prefix | Numeric prefix |
|
||||
| suffix | Suffixes for numeric values |
|
||||
| formatter | Numerical content |
|
||||
| title | Numeric titles |
|
||||
|
||||
|
||||
### 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' |
|
||||
### Statistic.Countdown Events
|
||||
| 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) |
|
||||
|
||||
|
||||
|
|
@ -169,4 +169,6 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
|
|||
| width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 |
|
||||
| show-text | mostrar porcentaje | boolean | — | true |
|
||||
| stroke-linecap | circle/dashboard tipo de diseño al final del camino | string | butt/round/square | round |
|
||||
| format | personalizar el formato de texto estableciendo format | function(percentage) | — | — |
|
||||
| format | personalizar el formato de texto estableciendo format | function(percentage) | — | — |
|
||||
| define-back-color | background color of progress bar (hex format) | string | — | — |
|
||||
| text-color | text color of progress bar (hex format) | string | — | — |
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
## 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>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
like: true,
|
||||
value1: 4154.564,
|
||||
value2: 2222,
|
||||
title: "Growth this year",
|
||||
input: "Hello Element UI!",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<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 **
|
||||
|
||||
If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown
|
||||
:::
|
||||
:::demo Providing a future time via 'value' will enable the countdown function
|
||||
```html
|
||||
<template>
|
||||
<div >
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="14">
|
||||
<div style="width: 100%; display: inline-block; ">
|
||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
||||
<template slot="suffix">
|
||||
The rush is about to begin
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
||||
<template slot="suffix">
|
||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
|
||||
</el-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({
|
||||
title: 'Prompt',
|
||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||
duration: 0
|
||||
});
|
||||
},
|
||||
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 |
|
||||
|
||||
|
||||
### Statistic Slots
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| prefix | Numeric prefix |
|
||||
| suffix | Suffixes for numeric values |
|
||||
| formatter | Numerical content |
|
||||
| title | Numeric titles |
|
||||
|
||||
|
||||
### 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' |
|
||||
### Statistic.Countdown Events
|
||||
| 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) |
|
||||
|
||||
|
||||
|
|
@ -172,4 +172,6 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
|
|||
| width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
|
||||
| show-text | Si le pourcentage doit être affiché. | boolean | — | true |
|
||||
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
|
||||
| format | Vous pouvez personnaliser le format du texte en définissant le format | function(percentage) | — | — |
|
||||
| format | Vous pouvez personnaliser le format du texte en définissant le format | function(percentage) | — | — |
|
||||
| define-back-color | background color of progress bar (hex format) | string | — | — |
|
||||
| text-color | text color of progress bar (hex format) | string | — | — |
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
## 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>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
like: true,
|
||||
value1: 4154.564,
|
||||
value2: 2222,
|
||||
title: "Growth this year",
|
||||
input: "Hello Element UI!",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<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 **
|
||||
|
||||
If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown
|
||||
:::
|
||||
:::demo Providing a future time via 'value' will enable the countdown function
|
||||
```html
|
||||
<template>
|
||||
<div >
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="14">
|
||||
<div style="width: 100%; display: inline-block; ">
|
||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
||||
<template slot="suffix">
|
||||
The rush is about to begin
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
||||
<template slot="suffix">
|
||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
|
||||
</el-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({
|
||||
title: 'Prompt',
|
||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||
duration: 0
|
||||
});
|
||||
},
|
||||
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 |
|
||||
|
||||
|
||||
### Statistic Slots
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| prefix | Numeric prefix |
|
||||
| suffix | Suffixes for numeric values |
|
||||
| formatter | Numerical content |
|
||||
| title | Numeric titles |
|
||||
|
||||
|
||||
### 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' |
|
||||
### Statistic.Countdown Events
|
||||
| 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) |
|
||||
|
||||
|
||||
|
|
@ -175,4 +175,6 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
|
|||
| width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | | 126 |
|
||||
| show-text | 是否显示进度条文字内容 | boolean | — | true |
|
||||
| stroke-linecap | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
|
||||
| format | 指定进度条文字内容 | function(percentage) | — | — |
|
||||
| format | 指定进度条文字内容 | function(percentage) | — | — |
|
||||
| define-back-color | 指定进度条底色（支持 hex 格式） | string | — | — |
|
||||
| text-color | 指定进度条字体颜色（支持 hex 格式） | string | — | — |
|
||||
|
|
|
|||
|
|
@ -187,7 +187,7 @@
|
|||
### Radio Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||
| input | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||
|
||||
### Radio-group Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
### Radio-group Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||
| input | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||
|
||||
### Radio-button Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,216 @@
|
|||
## Statistic 统计数值
|
||||
|
||||
用于突出某个或某组数字时，如显示数值，如金额，排名等。
|
||||
|
||||
倒计时模式
|
||||
|
||||
|
||||
### 基础用法
|
||||
组件提供千分位的展示，不过可以通过rate来设置相应万分位等
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div >
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div>
|
||||
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div>
|
||||
<el-statistic title="男女比">
|
||||
<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: "今年的增长",
|
||||
input: "Hello Element UI!",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.like {
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 倒计时
|
||||
:::warning
|
||||
suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为value指向的是未来的时间节点**。
|
||||
|
||||
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
|
||||
:::
|
||||
:::demo 通过 `value` 提供未来的时间，将开启倒计时功能
|
||||
```html
|
||||
<template>
|
||||
<div >
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="14">
|
||||
<div style="width: 100%; display: inline-block; ">
|
||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
||||
<template slot="suffix">
|
||||
抢购即将开始
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="一寸光阴一寸金">
|
||||
<template slot="suffix">
|
||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
|
||||
</el-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="距离明日：" 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({
|
||||
title: '提示',
|
||||
message: '时间已到，你可知寸金难买寸光阴？',
|
||||
duration: 0
|
||||
});
|
||||
},
|
||||
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
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| value | 数值内容 | string \| number | - | - |
|
||||
| decimal-separator | 设置小数点 | string | - | . |
|
||||
| formatter | 自定义数值展示| v-slot \|({value}) => VNode | - | - |
|
||||
| group-separator | 设置千分位标识符 | string | - | , |
|
||||
| precision | 数值精度 | number | - | 0 |
|
||||
| prefix | 设置数值的前缀 | string \| v-slot | - | - |
|
||||
| suffix |设置数值的后缀 | string \| v-slot | - | - |
|
||||
| title | 数值的标题 | string \| v-slot | - | - |
|
||||
| value-style | 设置数值的样式 | style | - | - |
|
||||
| rate | 设置倍率 | number | - | 1000 |
|
||||
|
||||
|
||||
### Statistic Slots
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| prefix | 数值的前缀 |
|
||||
| suffix | 数值的后缀 |
|
||||
| formatter | 数值内容 |
|
||||
| title | 数值的标题 |
|
||||
|
||||
|
||||
### Statistic.Countdown Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| time-indices | 是否开启倒计时功能 | boolean | true\|false | false |
|
||||
| value | 必填值，输入绑定值 | string | — | — |
|
||||
| format | 格式化倒计时展示 | string | — | 'HH:mm:ss' |
|
||||
### Statistic.Countdown Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| change | 在`倒计时`的功能中开启 | (value: Date) |
|
||||
| finish | 在`倒计时` 完成后启动 | (value: boolean) |
|
||||
|
||||
### Statistic Methods
|
||||
| 方法名 | 说明 | 参数 |回调参数|
|
||||
| ---- | ---- | ---- |---- |
|
||||
| suspend | 暂停倒计时|(value:boolean) |(value: Date) |
|
||||
|
||||
|
||||
|
|
@ -192,6 +192,10 @@
|
|||
{
|
||||
"path": "/result",
|
||||
"title": "Result 结果"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic 统计数值"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -621,6 +625,10 @@
|
|||
{
|
||||
"path": "/drawer",
|
||||
"title": "Drawer"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -935,6 +943,10 @@
|
|||
{
|
||||
"path": "/drawer",
|
||||
"title": "Drawer"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1249,6 +1261,10 @@
|
|||
{
|
||||
"path": "/drawer",
|
||||
"title": "Drawer"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.10":"2.15"}
|
||||
{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.12":"2.15"}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "element-ui",
|
||||
"version": "2.15.10",
|
||||
"version": "2.15.12",
|
||||
"description": "A Component Library for Vue.js.",
|
||||
"main": "lib/element-ui.common.js",
|
||||
"files": [
|
||||
|
|
@ -59,6 +59,7 @@
|
|||
},
|
||||
"unpkg": "lib/index.js",
|
||||
"style": "lib/theme-chalk/index.css",
|
||||
"web-types": "./web-types.json",
|
||||
"dependencies": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
aria-valuemax="100"
|
||||
>
|
||||
<div class="el-progress-bar" v-if="type === 'line'">
|
||||
<div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
|
||||
<div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px', backgroundColor:defineBackColor}">
|
||||
<div class="el-progress-bar__inner" :style="barStyle">
|
||||
<div class="el-progress-bar__innerText" v-if="showText && textInside">{{content}}</div>
|
||||
<div class="el-progress-bar__innerText" :style="{color:textColor}" v-if="showText && textInside">{{content}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<path
|
||||
class="el-progress-circle__track"
|
||||
:d="trackPath"
|
||||
stroke="#e5e9f2"
|
||||
:stroke="defineBackColor"
|
||||
:stroke-width="relativeStrokeWidth"
|
||||
fill="none"
|
||||
:style="trailPathStyle"></path>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<div
|
||||
class="el-progress__text"
|
||||
v-if="showText && !textInside"
|
||||
:style="{fontSize: progressTextSize + 'px'}"
|
||||
:style="{fontSize: progressTextSize + 'px', color:textColor}"
|
||||
>
|
||||
<template v-if="!status">{{content}}</template>
|
||||
<i v-else :class="iconClass"></i>
|
||||
|
|
@ -93,6 +93,14 @@
|
|||
type: [String, Array, Function],
|
||||
default: ''
|
||||
},
|
||||
defineBackColor: {
|
||||
type: [String, Array, Function],
|
||||
default: '#ebeef5'
|
||||
},
|
||||
textColor: {
|
||||
type: [String, Array, Function],
|
||||
default: '#606266'
|
||||
},
|
||||
format: Function
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import Statistic from './src/main';
|
||||
|
||||
/* istanbul ignore next */
|
||||
Statistic.install = function(Vue) {
|
||||
Vue.component(Statistic.name, Statistic);
|
||||
};
|
||||
|
||||
export default Statistic;
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
<template>
|
||||
<div class="el-statistic">
|
||||
<div class="head">
|
||||
<slot name="title">
|
||||
<span class="title">
|
||||
{{ title }}
|
||||
</span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="con">
|
||||
<span class="prefix">
|
||||
<slot name="prefix">
|
||||
{{ prefix }}
|
||||
</slot>
|
||||
</span>
|
||||
<span class="number" :style="valueStyle">
|
||||
<slot name="formatter"> {{ disposeValue }}</slot>
|
||||
</span>
|
||||
<span class="suffix">
|
||||
<slot name="suffix">
|
||||
{{ suffix }}
|
||||
</slot>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isNumber, ceil, fill, chain, multiply, padStart, reduce} from 'element-ui/src/utils/lodash';
|
||||
export default {
|
||||
name: 'ElStatistic',
|
||||
data() {
|
||||
return {
|
||||
disposeValue: '',
|
||||
timeTask: null,
|
||||
REFRESH_INTERVAL: 1000 / 30
|
||||
};
|
||||
},
|
||||
props: {
|
||||
decimalSeparator: {
|
||||
type: String,
|
||||
default: '.'
|
||||
},
|
||||
groupSeparator: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
precision: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
timeIndices: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
valueStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'HH:mm:ss:SSS'
|
||||
},
|
||||
rate: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.branch();
|
||||
},
|
||||
watch: {
|
||||
value: function() {
|
||||
this.branch();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
branch() {
|
||||
let { timeIndices, countDown, dispose} = this;
|
||||
timeIndices ? countDown() : dispose();
|
||||
},
|
||||
magnification(num, _mulriple = 1000, _groupSeparator = ',') {
|
||||
// magnification factor
|
||||
const level = String(_mulriple).length - 1;
|
||||
const reg = new RegExp(`\\d{1,${level}}(?=(\\d{${level}})+$)`, 'g');
|
||||
const result = String(num)
|
||||
.replace(reg, '$&,')
|
||||
.split(',')
|
||||
.join(_groupSeparator);
|
||||
return result;
|
||||
},
|
||||
dispose() {
|
||||
let { value, precision, groupSeparator, rate } = this;
|
||||
|
||||
if (!isNumber(value)) return false;
|
||||
if (precision) {
|
||||
value = ceil(value, precision);
|
||||
}
|
||||
|
||||
let integer = String(value).split('.')[0];
|
||||
let decimals =
|
||||
String(value).split('.')[1] ||
|
||||
(precision ? fill(Array(precision), 0).join('') : '');
|
||||
let result = 0;
|
||||
// 1000 multiplying power
|
||||
if (groupSeparator) {
|
||||
integer = this.magnification(integer, rate, groupSeparator);
|
||||
}
|
||||
|
||||
result = [integer, decimals].join(
|
||||
decimals ? this.decimalSeparator : ''
|
||||
);
|
||||
this.disposeValue = result;
|
||||
return result;
|
||||
},
|
||||
diffDate(minuend, subtrahend) {
|
||||
return Math.max(minuend - subtrahend, 0);
|
||||
},
|
||||
suspend(isStop) {
|
||||
if (isStop) {
|
||||
if (this.timeTask) {
|
||||
clearInterval(this.timeTask);
|
||||
this.timeTask = null;
|
||||
}
|
||||
|
||||
} else {
|
||||
this.branch();
|
||||
}
|
||||
return this.disposeValue;
|
||||
},
|
||||
formatTimeStr: function(time) {
|
||||
let {format} = this;
|
||||
const escapeRegex = /\[[^\]]*]/g;
|
||||
const keepList = (format.match(escapeRegex) || []).map(str => str.slice(1, -1));
|
||||
const timeUnits = [
|
||||
['Y', 1000 * 60 * 60 * 24 * 365], // years
|
||||
['M', 1000 * 60 * 60 * 24 * 30], // months
|
||||
['D', 1000 * 60 * 60 * 24], // days
|
||||
['H', 1000 * 60 * 60], // hours
|
||||
['m', 1000 * 60], // minutes
|
||||
['s', 1000], // seconds
|
||||
['S', 1] // million seconds
|
||||
];
|
||||
let formatText = reduce(
|
||||
timeUnits,
|
||||
(con, item) => {
|
||||
const name = item[0];
|
||||
return con.replace(new RegExp(`${name}+`, 'g'), (match) => {
|
||||
let sum = chain(time).divide(item[1]).floor(0).value();
|
||||
time -= multiply(sum, item[1]);
|
||||
return padStart(String(sum), String(match).length, 0);
|
||||
});
|
||||
},
|
||||
format
|
||||
);
|
||||
let index = 0;
|
||||
return formatText.replace(escapeRegex, () => {
|
||||
const match = keepList[index];
|
||||
index += 1;
|
||||
return match;
|
||||
});
|
||||
},
|
||||
stopTime(time) {
|
||||
let result = true; // stop
|
||||
if (time) {
|
||||
this.$emit('change', time);
|
||||
result = false;
|
||||
} else {
|
||||
result = true;
|
||||
this.suspend(true);
|
||||
this.$emit('finish', true);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
countDown() {
|
||||
let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend} = this;
|
||||
if (timeTask) return;
|
||||
let than = this;
|
||||
this.timeTask = setInterval(()=> {
|
||||
let {value} = than;
|
||||
let diffTiem = diffDate(value, Date.now());
|
||||
than.disposeValue = formatTimeStr(diffTiem);
|
||||
stopTime(diffTiem);
|
||||
}, REFRESH_INTERVAL);
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
suspend(true);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "element-theme-chalk",
|
||||
"version": "2.15.10",
|
||||
"version": "2.15.12",
|
||||
"description": "Element component chalk theme.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@
|
|||
@import "./cascader-panel.scss";
|
||||
@import "./avatar.scss";
|
||||
@import "./drawer.scss";
|
||||
@import "./statistic.scss";
|
||||
@import "./popconfirm.scss";
|
||||
@import "./skeleton.scss";
|
||||
@import "./skeleton-item.scss";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(statistic) {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $--color-black;
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5715;
|
||||
list-style: none;
|
||||
font-feature-settings: "tnum";
|
||||
text-align: center;
|
||||
.head {
|
||||
margin-bottom: 4px;
|
||||
color: #00000073;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.con{
|
||||
font-family: Sans-serif;
|
||||
display: flex;
|
||||
justify-content :center;
|
||||
align-items: center ;
|
||||
.number{
|
||||
font-size: 20px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
span{ display: inline-block;
|
||||
margin: 0;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -81,6 +81,7 @@ import PageHeader from '../packages/page-header/index.js';
|
|||
import CascaderPanel from '../packages/cascader-panel/index.js';
|
||||
import Avatar from '../packages/avatar/index.js';
|
||||
import Drawer from '../packages/drawer/index.js';
|
||||
import Statistic from '../packages/statistic/index.js';
|
||||
import Popconfirm from '../packages/popconfirm/index.js';
|
||||
import Skeleton from '../packages/skeleton/index.js';
|
||||
import SkeletonItem from '../packages/skeleton-item/index.js';
|
||||
|
|
@ -168,6 +169,7 @@ const components = [
|
|||
CascaderPanel,
|
||||
Avatar,
|
||||
Drawer,
|
||||
Statistic,
|
||||
Popconfirm,
|
||||
Skeleton,
|
||||
SkeletonItem,
|
||||
|
|
@ -210,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
|||
}
|
||||
|
||||
export default {
|
||||
version: '2.15.10',
|
||||
version: '2.15.12',
|
||||
locale: locale.use,
|
||||
i18n: locale.i18n,
|
||||
install,
|
||||
|
|
@ -296,6 +298,7 @@ export default {
|
|||
CascaderPanel,
|
||||
Avatar,
|
||||
Drawer,
|
||||
Statistic,
|
||||
Popconfirm,
|
||||
Skeleton,
|
||||
SkeletonItem,
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
selectTime: 'Pilih Masa',
|
||||
startDate: 'Tarikh Mula',
|
||||
startTime: 'Masa Mula',
|
||||
endDate: 'Tarik Tamat',
|
||||
endDate: 'Tarikh Tamat',
|
||||
endTime: 'Masa Tamat',
|
||||
prevYear: 'Tahun Lepas',
|
||||
nextYear: 'Tahun Depan',
|
||||
|
|
@ -33,7 +33,6 @@ export default {
|
|||
month10: 'Oktober',
|
||||
month11: 'November',
|
||||
month12: 'Disember',
|
||||
// week: '周次',
|
||||
weeks: {
|
||||
sun: 'Ahad',
|
||||
mon: 'Isnin',
|
||||
|
|
@ -68,7 +67,7 @@ export default {
|
|||
noMatch: 'Tiada maklumat yang sepadan',
|
||||
loading: 'Sedang dimuat turun',
|
||||
placeholder: 'Sila pilih',
|
||||
noData: 'Tiada maklumat buat sementara'
|
||||
noData: 'Tiada maklumat'
|
||||
},
|
||||
pagination: {
|
||||
goto: 'Seterusnya',
|
||||
|
|
@ -80,23 +79,23 @@ export default {
|
|||
title: 'Tip',
|
||||
confirm: 'Sah',
|
||||
cancel: 'Batal',
|
||||
error: 'Data yang diisikan tidak sah!'
|
||||
error: 'Data yang diisi tidak sah!'
|
||||
},
|
||||
upload: {
|
||||
deleteTip: 'Tekan "Padam" untuk memadam',
|
||||
delete: 'Padam',
|
||||
preview: 'Semak gambar',
|
||||
preview: 'Pratonton gambar',
|
||||
continue: 'Meneruskan muat naik'
|
||||
},
|
||||
table: {
|
||||
emptyText: 'Tiada maklumat buat sementara',
|
||||
emptyText: 'Tiada maklumat',
|
||||
confirmFilter: 'Tapis',
|
||||
resetFilter: 'Set Semula',
|
||||
clearFilter: 'Semua',
|
||||
sumText: 'Jumlah'
|
||||
},
|
||||
tree: {
|
||||
emptyText: 'Tiada maklumat buat sementara'
|
||||
emptyText: 'Tiada maklumat'
|
||||
},
|
||||
transfer: {
|
||||
noMatch: 'Tiada maklumat yang sepadan',
|
||||
|
|
@ -117,7 +116,7 @@ export default {
|
|||
cancelButtonText: 'Batal'
|
||||
},
|
||||
empty: {
|
||||
description: 'Tiada maklumat buat sementara'
|
||||
description: 'Tiada maklumat'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,10 +16,10 @@ export default {
|
|||
startTime: 'Start Tidspunkt',
|
||||
endDate: 'Sluttdato',
|
||||
endTime: 'Sluttidspunkt',
|
||||
prevYear: 'Previous Year', // to be translated
|
||||
nextYear: 'Next Year', // to be translated
|
||||
prevMonth: 'Previous Month', // to be translated
|
||||
nextMonth: 'Next Month', // to be translated
|
||||
prevYear: 'Forrige År',
|
||||
nextYear: 'Neste År',
|
||||
prevMonth: 'Forrige Måned',
|
||||
nextMonth: 'Neste Måned',
|
||||
year: '',
|
||||
month1: 'Januar',
|
||||
month2: 'Februar',
|
||||
|
|
@ -82,7 +82,7 @@ export default {
|
|||
error: 'Ugyldig input'
|
||||
},
|
||||
upload: {
|
||||
deleteTip: 'press delete to remove', // to be translated
|
||||
deleteTip: 'trykk slett for å ta bort',
|
||||
delete: 'Slett',
|
||||
preview: 'Forhåndsvisning',
|
||||
continue: 'Fortsett'
|
||||
|
|
@ -92,7 +92,7 @@ export default {
|
|||
confirmFilter: 'Bekreft',
|
||||
resetFilter: 'Tilbakestill',
|
||||
clearFilter: 'Alle',
|
||||
sumText: 'Sum' // to be translated
|
||||
sumText: 'Sum'
|
||||
},
|
||||
tree: {
|
||||
emptyText: 'Ingen Data'
|
||||
|
|
@ -100,20 +100,20 @@ export default {
|
|||
transfer: {
|
||||
noMatch: 'Ingen samsvarende data',
|
||||
noData: 'Ingen data',
|
||||
titles: ['List 1', 'List 2'], // to be translated
|
||||
filterPlaceholder: 'Enter keyword', // to be translated
|
||||
noCheckedFormat: '{total} items', // to be translated
|
||||
hasCheckedFormat: '{checked}/{total} checked' // to be translated
|
||||
titles: ['Liste 1', 'Liste 2'],
|
||||
filterPlaceholder: 'Tast inn nøkkelord',
|
||||
noCheckedFormat: '{total} gjenstander',
|
||||
hasCheckedFormat: '{checked}/{total} sjekket'
|
||||
},
|
||||
image: {
|
||||
error: 'FAILED' // to be translated
|
||||
error: 'MISLYKTES'
|
||||
},
|
||||
pageHeader: {
|
||||
title: 'Back' // to be translated
|
||||
title: 'Tilbake'
|
||||
},
|
||||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
confirmButtonText: 'Ja',
|
||||
cancelButtonText: 'Nei'
|
||||
},
|
||||
empty: {
|
||||
description: 'Ingen Data'
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,15 @@
|
|||
import { createTest, destroyVM } from '../util';
|
||||
import Statistic from 'packages/statistic';
|
||||
|
||||
describe('Statistic', () => {
|
||||
let vm;
|
||||
afterEach(() => {
|
||||
destroyVM(vm);
|
||||
});
|
||||
|
||||
it('create', () => {
|
||||
vm = createTest(Statistic, true);
|
||||
expect(vm.$el).to.exist;
|
||||
});
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,27 @@
|
|||
import { ElementUIComponent } from './component'
|
||||
|
||||
/** Statistic Component */
|
||||
export declare class ElStatistic extends ElementUIComponent {
|
||||
/** Set the decimal point */
|
||||
decimalSeparator:string
|
||||
/** Sets the thousandth identifier */
|
||||
groupSeparator:string
|
||||
/** numerical precision */
|
||||
precision:number
|
||||
/** Numerical content */
|
||||
value:string|number
|
||||
/** Title of numerical value */
|
||||
title:string|number
|
||||
/**Whether to enable the countdown function */
|
||||
timeIndices:boolean
|
||||
/** Sets the style of the value */
|
||||
valueStyle:object
|
||||
/** Numeric content formatting countdown display*/
|
||||
format:string
|
||||
/** Set the ratio */
|
||||
rate:number
|
||||
/** Set the suffix of the value*/
|
||||
suffix:string
|
||||
/** Set the prefix of the value*/
|
||||
prefix:string
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue