Skip to content

E
Element
Commit ddbf9df0 authored by 博风's avatar 博风
Browse files
Options

chore: update docs and fix bugs

parent d34196d8
Hide whitespace changes
Inline Side-by-side
Showing with 256 additions and 67 deletions
components.json
View file @ ddbf9df0
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
"cascader-panel": "./packages/cascader-panel/index.js", "cascader-panel": "./packages/cascader-panel/index.js",
"avatar": "./packages/avatar/index.js", "avatar": "./packages/avatar/index.js",
"drawer": "./packages/drawer/index.js", "drawer": "./packages/drawer/index.js",
"statistic": "./packages/statistic/index.js" "statistic": "./packages/statistic/index.js",
"popconfirm": "./packages/popconfirm/index.js", "popconfirm": "./packages/popconfirm/index.js",
"skeleton": "./packages/skeleton/index.js", "skeleton": "./packages/skeleton/index.js",
"skeleton-item": "./packages/skeleton-item/index.js", "skeleton-item": "./packages/skeleton-item/index.js",
......
examples/docs/en-US/progress.md
View file @ ddbf9df0
...@@ -171,4 +171,6 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b ...@@ -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 | | width | the canvas width of circle progress bar | number | — | 126 |
| show-text | whether to show percentage | boolean | — | true | | show-text | whether to show percentage | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round | | 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) | — | — |
\ No newline at end of file | define-back-color | background color of progress bar (hex format) | string | — | — |
| text-color | text color of progress bar (hex format) | string | — | — |
\ No newline at end of file
examples/docs/en-US/statistic.md
View file @ ddbf9df0
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
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
...@@ -16,7 +14,7 @@ The component provides a thousandth place display, but you can use rate to set t ...@@ -16,7 +14,7 @@ The component provides a thousandth place display, but you can use rate to set t
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"> <el-col :span="6">
<div> <div>
<el-statistic groupSeparator="," :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">
...@@ -31,7 +29,7 @@ The component provides a thousandth place display, but you can use rate to set t ...@@ -31,7 +29,7 @@ The component provides a thousandth place display, but you can use rate to set t
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div> <div>
<el-statistic groupSeparator="," :precision="2" decimalSeparator="." :value="value1" :title="title"> <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
<template slot="prefix"> <template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i> <i class="el-icon-s-flag" style="color: red"></i>
</template> </template>
...@@ -94,14 +92,14 @@ If you need to add time to the original, please note that the overall time (the ...@@ -94,14 +92,14 @@ If you need to add time to the original, please note that the overall time (the
<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" timeIndices title="商品降价"> <el-statistic :value="deadline2" time-indices title="商品降价">
<template slot="suffix"> <template slot="suffix">
The rush is about to begin The rush is about to begin
</template> </template>
</el-statistic> </el-statistic>
</div> </div>
<div style="width: 100%; display: inline-block; margin-top: 50px; "> <div style="width: 100%; display: inline-block; margin-top: 50px; ">
<el-statistic @finish="hilarity" :value="deadline3" timeIndices title="The Value of Time"> <el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
<template slot="suffix"> <template slot="suffix">
<el-button type="primary " size="small" @click="add">add 10 second</el-button> <el-button type="primary " size="small" @click="add">add 10 second</el-button>
</template> </template>
...@@ -122,7 +120,7 @@ If you need to add time to the original, please note that the overall time (the ...@@ -122,7 +120,7 @@ If you need to add time to the original, please note that the overall time (the
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div> <div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
<div style="margin-top: 40px;"></div> <div style="margin-top: 40px;"></div>
<el-statistic ref="statistic" @finish="hilarity" :value="deadline4" title="Distance to Tomorrow:" timeIndices > </el-statistic> <el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="Distance to Tomorrow:" time-indices > </el-statistic>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
...@@ -177,14 +175,14 @@ export default { ...@@ -177,14 +175,14 @@ export default {
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| value | Numerical content | string \| number | - | - | | value | Numerical content | string \| number | - | - |
| decimalSeparator | 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 | - | - |
| groupSeparator | 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 | - | - |
| valueStyle | Styles numeric values | style | - | - | | value-style | Styles numeric values | style | - | - |
| rate | Set the ratio | number | - | 1000 | | rate | Set the ratio | number | - | 1000 |
...@@ -201,7 +199,7 @@ export default { ...@@ -201,7 +199,7 @@ export default {
| Attribute | Description | Type | Options | Default | | Attribute | Description | Type | Options | Default |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| timeIndices | Whether to enable the countdown function | boolean | true\|false | false | | time-indices | Whether to enable the countdown function | boolean | true\|false | false |
| value | Required value, enter the bound value | string | — | — | | value | Required value, enter the bound value | string | — | — |
| format | Formatting the countdown display | string | — | 'HH:mm:ss' | | format | Formatting the countdown display | string | — | 'HH:mm:ss' |
### Statistic.Countdown Events ### Statistic.Countdown Events
......
examples/docs/es/progress.md
View file @ ddbf9df0
...@@ -169,4 +169,6 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr ...@@ -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 | | width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 |
| show-text | mostrar porcentaje | boolean | — | true | | show-text | mostrar porcentaje | boolean | — | true |
| stroke-linecap | circle/dashboard tipo de diseño al final del camino | string | butt/round/square | round | | 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) | — | — |
\ No newline at end of file | define-back-color | background color of progress bar (hex format) | string | — | — |
| text-color | text color of progress bar (hex format) | string | — | — |
\ No newline at end of file
examples/docs/es/statistic.md
View file @ ddbf9df0
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
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
...@@ -16,7 +14,7 @@ The component provides a thousandth place display, but you can use rate to set t ...@@ -16,7 +14,7 @@ The component provides a thousandth place display, but you can use rate to set t
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"> <el-col :span="6">
<div> <div>
<el-statistic groupSeparator="," :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">
...@@ -31,7 +29,7 @@ The component provides a thousandth place display, but you can use rate to set t ...@@ -31,7 +29,7 @@ The component provides a thousandth place display, but you can use rate to set t
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div> <div>
<el-statistic groupSeparator="," :precision="2" decimalSeparator="." :value="value1" :title="title"> <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
<template slot="prefix"> <template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i> <i class="el-icon-s-flag" style="color: red"></i>
</template> </template>
...@@ -94,14 +92,14 @@ If you need to add time to the original, please note that the overall time (the ...@@ -94,14 +92,14 @@ If you need to add time to the original, please note that the overall time (the
<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" timeIndices title="商品降价"> <el-statistic :value="deadline2" time-indices title="商品降价">
<template slot="suffix"> <template slot="suffix">
The rush is about to begin The rush is about to begin
</template> </template>
</el-statistic> </el-statistic>
</div> </div>
<div style="width: 100%; display: inline-block; margin-top: 50px; "> <div style="width: 100%; display: inline-block; margin-top: 50px; ">
<el-statistic @finish="hilarity" :value="deadline3" timeIndices title="The Value of Time"> <el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
<template slot="suffix"> <template slot="suffix">
<el-button type="primary " size="small" @click="add">add 10 second</el-button> <el-button type="primary " size="small" @click="add">add 10 second</el-button>
</template> </template>
...@@ -122,7 +120,7 @@ If you need to add time to the original, please note that the overall time (the ...@@ -122,7 +120,7 @@ If you need to add time to the original, please note that the overall time (the
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div> <div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
<div style="margin-top: 40px;"></div> <div style="margin-top: 40px;"></div>
<el-statistic ref="statistic" @finish="hilarity" :value="deadline4" title="Distance to Tomorrow:" timeIndices > </el-statistic> <el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="Distance to Tomorrow:" time-indices > </el-statistic>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
...@@ -177,14 +175,14 @@ export default { ...@@ -177,14 +175,14 @@ export default {
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| value | Numerical content | string \| number | - | - | | value | Numerical content | string \| number | - | - |
| decimalSeparator | 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 | - | - |
| groupSeparator | 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 | - | - |
| valueStyle | Styles numeric values | style | - | - | | value-style | Styles numeric values | style | - | - |
| rate | Set the ratio | number | - | 1000 | | rate | Set the ratio | number | - | 1000 |
...@@ -201,7 +199,7 @@ export default { ...@@ -201,7 +199,7 @@ export default {
| Attribute | Description | Type | Options | Default | | Attribute | Description | Type | Options | Default |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| timeIndices | Whether to enable the countdown function | boolean | true\|false | false | | time-indices | Whether to enable the countdown function | boolean | true\|false | false |
| value | Required value, enter the bound value | string | — | — | | value | Required value, enter the bound value | string | — | — |
| format | Formatting the countdown display | string | — | 'HH:mm:ss' | | format | Formatting the countdown display | string | — | 'HH:mm:ss' |
### Statistic.Countdown Events ### Statistic.Countdown Events
......
examples/docs/fr-FR/progress.md
View file @ ddbf9df0
...@@ -172,4 +172,6 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser ...@@ -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 | | width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
| show-text | Si le pourcentage doit être affiché. | boolean | — | true | | 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 | | 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) | — | — |
\ No newline at end of file | define-back-color | background color of progress bar (hex format) | string | — | — |
| text-color | text color of progress bar (hex format) | string | — | — |
\ No newline at end of file
examples/docs/fr-FR/statistic.md
View file @ ddbf9df0
## Statistic ## Statistic
Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.
Countdown mode
### Basic usage
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
:::demo
```html
<template>
<div >
<el-row :gutter="20">
<el-col :span="6">
<div>
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="Gender Distribution">
<template slot="formatter">
456/2
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
<template slot="suffix">
<i class="el-icon-s-flag" style="color: blue"></i>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic :value="like ? 521 : 520" title="Feedback">
<template slot="suffix">
<span @click="like = !like" class="like">
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span> </template>
</el-statistic>
</div>
</el-col>
</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) |
examples/docs/zh-CN/progress.md
View file @ ddbf9df0
...@@ -175,4 +175,6 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形 ...@@ -175,4 +175,6 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
| width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | | 126 | | width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | | 126 |
| show-text | 是否显示进度条文字内容 | boolean | — | true | | show-text | 是否显示进度条文字内容 | boolean | — | true |
| stroke-linecap | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round | | stroke-linecap | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
| format | 指定进度条文字内容 | function(percentage) | — | — | | format | 指定进度条文字内容 | function(percentage) | — | — |
\ No newline at end of file | define-back-color | 指定进度条底色（支持 hex 格式） | string | — | — |
| text-color | 指定进度条字体颜色（支持 hex 格式） | string | — | — |
examples/docs/zh-CN/statistic.md
View file @ ddbf9df0
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"> <el-col :span="6">
<div> <div>
<el-statistic groupSeparator="," :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">
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div> <div>
<el-statistic groupSeparator="," :precision="2" decimalSeparator="." :value="value1" :title="title"> <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
<template slot="prefix"> <template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i> <i class="el-icon-s-flag" style="color: red"></i>
</template> </template>
...@@ -92,14 +92,14 @@ suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为valu ...@@ -92,14 +92,14 @@ suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为valu
<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" timeIndices title="商品降价"> <el-statistic :value="deadline2" time-indices title="商品降价">
<template slot="suffix"> <template slot="suffix">
抢购即将开始 抢购即将开始
</template> </template>
</el-statistic> </el-statistic>
</div> </div>
<div style="width: 100%; display: inline-block; margin-top: 50px; "> <div style="width: 100%; display: inline-block; margin-top: 50px; ">
<el-statistic @finish="hilarity" :value="deadline3" timeIndices title="一寸光阴一寸金"> <el-statistic @finish="hilarity" :value="deadline3" time-indices title="一寸光阴一寸金">
<template slot="suffix"> <template slot="suffix">
<el-button type="primary " size="small" @click="add">add 10 second</el-button> <el-button type="primary " size="small" @click="add">add 10 second</el-button>
</template> </template>
...@@ -120,7 +120,7 @@ suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为valu ...@@ -120,7 +120,7 @@ suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为valu
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div> <div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
<div style="margin-top: 40px;"></div> <div style="margin-top: 40px;"></div>
<el-statistic ref="statistic" @finish="hilarity" :value="deadline4" title="距离明日：" timeIndices > </el-statistic> <el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="距离明日：" time-indices > </el-statistic>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
...@@ -175,14 +175,14 @@ export default { ...@@ -175,14 +175,14 @@ export default {
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| value | 数值内容 | string \| number | - | - | | value | 数值内容 | string \| number | - | - |
| decimalSeparator | 设置小数点 | string | - | . | | decimal-separator | 设置小数点 | string | - | . |
| formatter | 自定义数值展示| v-slot \|({value}) => VNode | - | - | | formatter | 自定义数值展示| v-slot \|({value}) => VNode | - | - |
| groupSeparator | 设置千分位标识符 | 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 | - | - |
| valueStyle | 设置数值的样式 | style | - | - | | value-style | 设置数值的样式 | style | - | - |
| rate | 设置倍率 | number | - | 1000 | | rate | 设置倍率 | number | - | 1000 |
...@@ -199,7 +199,7 @@ export default { ...@@ -199,7 +199,7 @@ export default {
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| timeIndices | 是否开启倒计时功能 | boolean | true\|false | false | | time-indices | 是否开启倒计时功能 | boolean | true\|false | false |
| value | 必填值，输入绑定值 | string | — | — | | value | 必填值，输入绑定值 | string | — | — |
| format | 格式化倒计时展示 | string | — | 'HH:mm:ss' | | format | 格式化倒计时展示 | string | — | 'HH:mm:ss' |
### Statistic.Countdown Events ### Statistic.Countdown Events
......
packages/select/src/option.vue
View file @ ddbf9df0
...@@ -37,10 +37,6 @@ ...@@ -37,10 +37,6 @@
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
},
selectedColor: {
type: String,
default: '#409EFF'
} }
}, },
...@@ -135,24 +131,6 @@ ...@@ -135,24 +131,6 @@
selectOptionClick() { selectOptionClick() {
if (this.disabled !== true && this.groupDisabled !== true) { if (this.disabled !== true && this.groupDisabled !== true) {
this.dispatch('ElSelect', 'handleOptionClick', [this, true]); this.dispatch('ElSelect', 'handleOptionClick', [this, true]);
if (this.selectedColor !== '#409EFF') {
// 如果不是默认的颜色
if (this.$el.className === 'el-select-dropdown__item selected hover' ||
this.$el.className === 'el-select-dropdown__item hover'
) {
let siblingsNode = this.$parent.$children;
siblingsNode.forEach(item=>{
if (item.$el.className === 'el-select-dropdown__item' ||
item.$el.className === 'el-select-dropdown__item selected') {
item.$el.style.color = '#606266';
}
});
this.$el.style.color = this.selectedColor;
} else {
this.$el.style.color = '#606266';
}
}
} }
}, },
...@@ -172,7 +150,6 @@ ...@@ -172,7 +150,6 @@
this.$on('queryChange', this.queryChange); this.$on('queryChange', this.queryChange);
this.$on('handleGroupDisabled', this.handleGroupDisabled); this.$on('handleGroupDisabled', this.handleGroupDisabled);
}, },
beforeDestroy() { beforeDestroy() {
......
packages/theme-chalk/src/index.scss
View file @ ddbf9df0
...@@ -85,4 +85,3 @@ ...@@ -85,4 +85,3 @@
@import "./descriptions.scss"; @import "./descriptions.scss";
@import "./descriptions-item.scss"; @import "./descriptions-item.scss";
@import "./result.scss"; @import "./result.scss";
src/index.js
View file @ ddbf9df0
...@@ -81,9 +81,7 @@ import PageHeader from '../packages/page-header/index.js'; ...@@ -81,9 +81,7 @@ import PageHeader from '../packages/page-header/index.js';
import CascaderPanel from '../packages/cascader-panel/index.js'; import CascaderPanel from '../packages/cascader-panel/index.js';
import Avatar from '../packages/avatar/index.js'; import Avatar from '../packages/avatar/index.js';
import Drawer from '../packages/drawer/index.js'; import Drawer from '../packages/drawer/index.js';
import Statistic from '../packages/statistic/index.js'; import Statistic from '../packages/statistic/index.js';
import Popconfirm from '../packages/popconfirm/index.js'; import Popconfirm from '../packages/popconfirm/index.js';
import Skeleton from '../packages/skeleton/index.js'; import Skeleton from '../packages/skeleton/index.js';
import SkeletonItem from '../packages/skeleton-item/index.js'; import SkeletonItem from '../packages/skeleton-item/index.js';
...@@ -91,7 +89,6 @@ import Empty from '../packages/empty/index.js'; ...@@ -91,7 +89,6 @@ import Empty from '../packages/empty/index.js';
import Descriptions from '../packages/descriptions/index.js'; import Descriptions from '../packages/descriptions/index.js';
import DescriptionsItem from '../packages/descriptions-item/index.js'; import DescriptionsItem from '../packages/descriptions-item/index.js';
import Result from '../packages/result/index.js'; import Result from '../packages/result/index.js';
import locale from 'element-ui/src/locale'; import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition'; import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
...@@ -301,9 +298,7 @@ export default { ...@@ -301,9 +298,7 @@ export default {
CascaderPanel, CascaderPanel,
Avatar, Avatar,
Drawer, Drawer,
Statistic, Statistic,
Popconfirm, Popconfirm,
Skeleton, Skeleton,
SkeletonItem, SkeletonItem,
...@@ -311,5 +306,4 @@ export default { ...@@ -311,5 +306,4 @@ export default {
Descriptions, Descriptions,
DescriptionsItem, DescriptionsItem,
Result Result
}; };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment