mirror of https://github.com/ElemeFE/element
Merge branch 'ElemeFE:dev' into dev
xujintai123
GitHub
commit
1df5cba144
|
|
@ -1,5 +1,6 @@
|
||||||
src/utils/popper.js
|
src/utils/popper.js
|
||||||
src/utils/date.js
|
src/utils/date.js
|
||||||
|
src/utils/lodash.js
|
||||||
examples/play
|
examples/play
|
||||||
*.sh
|
*.sh
|
||||||
node_modules
|
node_modules
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,63 @@
|
||||||
## Changelog
|
## 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*
|
||||||
|
|
||||||
|
#### Bug fixes
|
||||||
|
|
||||||
|
- DatePicker
|
||||||
|
- Fix props placement error (#21908 by @lqzhgood)
|
||||||
|
- Loading
|
||||||
|
- Fix sticky DOM error (#22087 by @zzjjhh001)
|
||||||
|
- Docs
|
||||||
|
- Fix Popover docs (#22083 by @lm312)
|
||||||
|
- Fix Skeleton docs (#22092 by @lm312)
|
||||||
|
- Fix DatePicker docs (#21970 by @guojiongwei)
|
||||||
|
- Tree:
|
||||||
|
- fix lazy-load default check problem (#21934 by @kiss-yu)
|
||||||
|
|
||||||
|
#### Optimization
|
||||||
|
|
||||||
|
- I18n
|
||||||
|
- Add translation of Sinhalese (#21936 by @sayuri-gi)
|
||||||
|
- Update translation of Spanish (#21924 by @jcardus)
|
||||||
|
- Add translation of Malaysian (#22028 by @iorange0411)
|
||||||
|
- Update translation of Swahili (#21904 by @Cholowao)
|
||||||
|
- Utils
|
||||||
|
- update date-util.js (#22099 by @Due07)
|
||||||
|
- DatePicker
|
||||||
|
- add months And years type (#21918 by @akiko123456)
|
||||||
|
|
||||||
### 2.15.9
|
### 2.15.9
|
||||||
|
|
||||||
*2022-06-02*
|
*2022-06-02*
|
||||||
|
|
@ -18,7 +76,7 @@
|
||||||
- Fix Calendar docs (#21814 by @GoJam11)
|
- Fix Calendar docs (#21814 by @GoJam11)
|
||||||
- Fix TimePicker docs (#21803 by @Alanscut)
|
- Fix TimePicker docs (#21803 by @Alanscut)
|
||||||
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
||||||
- 其他
|
- Other
|
||||||
- Fix codepen display bug (#21863 by @bofeng)
|
- Fix codepen display bug (#21863 by @bofeng)
|
||||||
|
|
||||||
#### Optimization
|
#### Optimization
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,63 @@
|
||||||
## Changelog
|
## 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*
|
||||||
|
|
||||||
|
#### Bug fixes
|
||||||
|
|
||||||
|
- DatePicker
|
||||||
|
- Fix props placement error (#21908 by @lqzhgood)
|
||||||
|
- Loading
|
||||||
|
- Fix sticky DOM error (#22087 by @zzjjhh001)
|
||||||
|
- Docs
|
||||||
|
- Fix Popover docs (#22083 by @lm312)
|
||||||
|
- Fix Skeleton docs (#22092 by @lm312)
|
||||||
|
- Fix DatePicker docs (#21970 by @guojiongwei)
|
||||||
|
- Tree:
|
||||||
|
- fix lazy-load default check problem (#21934 by @kiss-yu)
|
||||||
|
|
||||||
|
#### Optimization
|
||||||
|
|
||||||
|
- I18n
|
||||||
|
- Add translation of Sinhalese (#21936 by @sayuri-gi)
|
||||||
|
- Update translation of Spanish (#21924 by @jcardus)
|
||||||
|
- Add translation of Malaysian (#22028 by @iorange0411)
|
||||||
|
- Update translation of Swahili (#21904 by @Cholowao)
|
||||||
|
- Utils
|
||||||
|
- update date-util.js (#22099 by @Due07)
|
||||||
|
- DatePicker
|
||||||
|
- add months And years type (#21918 by @akiko123456)
|
||||||
|
|
||||||
### 2.15.9
|
### 2.15.9
|
||||||
|
|
||||||
*2022-06-02*
|
*2022-06-02*
|
||||||
|
|
@ -18,7 +76,7 @@
|
||||||
- Fix Calendar docs (#21814 by @GoJam11)
|
- Fix Calendar docs (#21814 by @GoJam11)
|
||||||
- Fix TimePicker docs (#21803 by @Alanscut)
|
- Fix TimePicker docs (#21803 by @Alanscut)
|
||||||
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
||||||
- 其他
|
- Other
|
||||||
- Fix codepen display bug (#21863 by @bofeng)
|
- Fix codepen display bug (#21863 by @bofeng)
|
||||||
|
|
||||||
#### Optimization
|
#### Optimization
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,63 @@
|
||||||
## Changelog
|
## 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*
|
||||||
|
|
||||||
|
#### Bug fixes
|
||||||
|
|
||||||
|
- DatePicker
|
||||||
|
- Fix props placement error (#21908 by @lqzhgood)
|
||||||
|
- Loading
|
||||||
|
- Fix sticky DOM error (#22087 by @zzjjhh001)
|
||||||
|
- Docs
|
||||||
|
- Fix Popover docs (#22083 by @lm312)
|
||||||
|
- Fix Skeleton docs (#22092 by @lm312)
|
||||||
|
- Fix DatePicker docs (#21970 by @guojiongwei)
|
||||||
|
- Tree:
|
||||||
|
- fix lazy-load default check problem (#21934 by @kiss-yu)
|
||||||
|
|
||||||
|
#### Optimization
|
||||||
|
|
||||||
|
- I18n
|
||||||
|
- Add translation of Sinhalese (#21936 by @sayuri-gi)
|
||||||
|
- Update translation of Spanish (#21924 by @jcardus)
|
||||||
|
- Add translation of Malaysian (#22028 by @iorange0411)
|
||||||
|
- Update translation of Swahili (#21904 by @Cholowao)
|
||||||
|
- Utils
|
||||||
|
- update date-util.js (#22099 by @Due07)
|
||||||
|
- DatePicker
|
||||||
|
- add months And years type (#21918 by @akiko123456)
|
||||||
|
|
||||||
### 2.15.9
|
### 2.15.9
|
||||||
|
|
||||||
*2022-06-02*
|
*2022-06-02*
|
||||||
|
|
@ -18,7 +76,7 @@
|
||||||
- Fix Calendar docs (#21814 by @GoJam11)
|
- Fix Calendar docs (#21814 by @GoJam11)
|
||||||
- Fix TimePicker docs (#21803 by @Alanscut)
|
- Fix TimePicker docs (#21803 by @Alanscut)
|
||||||
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
||||||
- 其他
|
- Other
|
||||||
- Fix codepen display bug (#21863 by @bofeng)
|
- Fix codepen display bug (#21863 by @bofeng)
|
||||||
|
|
||||||
#### Optimization
|
#### Optimization
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,63 @@
|
||||||
## 更新日志
|
## 更新日志
|
||||||
|
|
||||||
|
### 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*
|
||||||
|
|
||||||
|
#### Bug 修复
|
||||||
|
|
||||||
|
- DatePicker
|
||||||
|
- 修复 props placement 报错信息 问题 (#21908 by @lqzhgood)
|
||||||
|
- Loading
|
||||||
|
- 修复 使用 Loading 的DOM元素 sticky失效 问题 (#22087 by @zzjjhh001)
|
||||||
|
- Docs
|
||||||
|
- 修复 Popover 文案 (#22083 by @lm312)
|
||||||
|
- 修复 Skeleton 文案 (#22092 by @lm312)
|
||||||
|
- 修复 DatePicker 文案 (#21970 by @guojiongwei)
|
||||||
|
- Tree
|
||||||
|
- 修复 懒加载默认选中 问题 (#21934 by @kiss-yu)
|
||||||
|
|
||||||
|
#### 优化
|
||||||
|
|
||||||
|
- I18n
|
||||||
|
- 新增 僧伽罗语 翻译 (#21936 by @sayuri-gi)
|
||||||
|
- 更新 西班牙语 翻译 (#21924 by @jcardus)
|
||||||
|
- 新增 马来西亚语 翻译 (#22028 by @iorange0411)
|
||||||
|
- 更新 斯瓦希里语 翻译 (#21904 by @Cholowao)
|
||||||
|
- Utils
|
||||||
|
- 更新 date-util.js (#22099 by @Due07)
|
||||||
|
- DatePicker
|
||||||
|
- 新增 months 和 years 类型 (#21918 by @akiko123456)
|
||||||
|
|
||||||
### 2.15.9
|
### 2.15.9
|
||||||
|
|
||||||
*2022-06-02*
|
*2022-06-02*
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
|
|
||||||
Element will stay with Vue 2.x
|
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
|
## Links
|
||||||
- Homepage and documentation
|
- Homepage and documentation
|
||||||
|
|
|
||||||
|
|
@ -46,4 +46,4 @@ exports.vue = {
|
||||||
amd: '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",
|
"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",
|
||||||
"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",
|
||||||
|
|
|
||||||
|
|
@ -112,6 +112,24 @@ You can choose week, month, year or multiple dates by extending the standard dat
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="block">
|
||||||
|
<span class="demonstration">months</span>
|
||||||
|
<el-date-picker
|
||||||
|
type="months"
|
||||||
|
v-model="value5"
|
||||||
|
placeholder="Pick one or more months">
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<span class="demonstration">years</span>
|
||||||
|
<el-date-picker
|
||||||
|
type="years"
|
||||||
|
v-model="value6"
|
||||||
|
placeholder="Pick one or more years">
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -120,7 +138,9 @@ You can choose week, month, year or multiple dates by extending the standard dat
|
||||||
value1: '',
|
value1: '',
|
||||||
value2: '',
|
value2: '',
|
||||||
value3: '',
|
value3: '',
|
||||||
value4: ''
|
value4: '',
|
||||||
|
value5: '',
|
||||||
|
value6: ''
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -442,7 +462,7 @@ When picking a date range, you can assign the time part for start date and end d
|
||||||
| placeholder | placeholder in non-range mode | string | — | — |
|
| placeholder | placeholder in non-range mode | string | — | — |
|
||||||
| start-placeholder | placeholder for the start date in range mode | string | — | — |
|
| start-placeholder | placeholder for the start date in range mode | string | — | — |
|
||||||
| end-placeholder | placeholder for the end date in range mode | string | — | — |
|
| end-placeholder | placeholder for the end date in range mode | string | — | — |
|
||||||
| type | type of the picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |
|
| type | type of the picker | string | year/month/date/dates/months/years/datetime/ week/datetimerange/daterange/ monthrange | date |
|
||||||
| format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | yyyy-MM-dd |
|
| format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | yyyy-MM-dd |
|
||||||
| align | alignment | left/center/right | left |
|
| align | alignment | left/center/right | left |
|
||||||
| popper-class | custom class name for DatePicker's dropdown | string | — | — |
|
| popper-class | custom class name for DatePicker's dropdown | string | — | — |
|
||||||
|
|
@ -456,6 +476,7 @@ When picking a date range, you can assign the time part for start date and end d
|
||||||
| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
|
| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
|
||||||
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
|
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
|
||||||
| validate-event | whether to trigger form validation | boolean | - | true |
|
| validate-event | whether to trigger form validation | boolean | - | true |
|
||||||
|
| append-to-body | whether to append DatePicker itself to body | boolean | — | true |
|
||||||
|
|
||||||
### Picker Options
|
### Picker Options
|
||||||
| Attribute | Description | Type | Accepted Values | Default |
|
| Attribute | Description | Type | Accepted Values | Default |
|
||||||
|
|
|
||||||
|
|
@ -172,3 +172,5 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
|
||||||
| 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) | — | — |
|
||||||
|
| 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) |
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -114,6 +114,24 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="block">
|
||||||
|
<span class="demonstration">months</span>
|
||||||
|
<el-date-picker
|
||||||
|
type="months"
|
||||||
|
v-model="value5"
|
||||||
|
placeholder="Pick one or more months">
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<span class="demonstration">years</span>
|
||||||
|
<el-date-picker
|
||||||
|
type="years"
|
||||||
|
v-model="value6"
|
||||||
|
placeholder="Pick one or more years">
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -122,7 +140,9 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
|
||||||
value1: '',
|
value1: '',
|
||||||
value2: '',
|
value2: '',
|
||||||
value3: '',
|
value3: '',
|
||||||
value4: ''
|
value4: '',
|
||||||
|
value5: '',
|
||||||
|
value6: ''
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -443,7 +463,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
|
||||||
| placeholder | placeholder cuando el modo NO es rango | string | — | — |
|
| placeholder | placeholder cuando el modo NO es rango | string | — | — |
|
||||||
| start-placeholder | placeholder para la fecha de inicio en modo rango | string | — | — |
|
| start-placeholder | placeholder para la fecha de inicio en modo rango | string | — | — |
|
||||||
| end-placeholder | placeholder para la fecha final en modo rango | string | — | — |
|
| end-placeholder | placeholder para la fecha final en modo rango | string | — | — |
|
||||||
| type | tipo de picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |
|
| type | tipo de picker | string | year/month/date/dates/months/years/datetime/ week/datetimerange/daterange/ monthrange | date |
|
||||||
| format | formato en que se muestra el valor en el input | string | ver [date formats](#/es/component/date-picker#date-formats) | yyyy-MM-dd |
|
| format | formato en que se muestra el valor en el input | string | ver [date formats](#/es/component/date-picker#date-formats) | yyyy-MM-dd |
|
||||||
| align | alineación | left/center/right | left | |
|
| align | alineación | left/center/right | left | |
|
||||||
| popper-class | nombre de clase personalizada para el dropdown de DatePicker | string | — | — |
|
| popper-class | nombre de clase personalizada para el dropdown de DatePicker | string | — | — |
|
||||||
|
|
@ -456,6 +476,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
|
||||||
| unlink-panels | desvincular los dos paneles de fecha en el range-picker | boolean | — | false |
|
| unlink-panels | desvincular los dos paneles de fecha en el range-picker | boolean | — | false |
|
||||||
| prefix-icon | Clase personalizada para el icono prefijado | string | — | el-icon-date |
|
| prefix-icon | Clase personalizada para el icono prefijado | string | — | el-icon-date |
|
||||||
| clear-icon | Clase personalizada para el icono `clear` | string | — | el-icon-circle-close |
|
| clear-icon | Clase personalizada para el icono `clear` | string | — | el-icon-circle-close |
|
||||||
|
| append-to-body | Si adjuntar el cuadro de DatePicker al cuerpo | boolean | — | true |
|
||||||
|
|
||||||
### Opciones del Picker
|
### Opciones del Picker
|
||||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||||
|
|
|
||||||
|
|
@ -170,3 +170,5 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
|
||||||
| 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) | — | — |
|
||||||
|
| 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) |
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -456,6 +456,7 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
|
||||||
| prefix-icon | Icône de préfixe. | string | — | el-icon-date |
|
| prefix-icon | Icône de préfixe. | string | — | el-icon-date |
|
||||||
| clear-icon | Icône de reset. | string | — | el-icon-circle-close |
|
| clear-icon | Icône de reset. | string | — | el-icon-circle-close |
|
||||||
| validate-event | Si la validation doit être déclenchée. | boolean | - | true |
|
| validate-event | Si la validation doit être déclenchée. | boolean | - | true |
|
||||||
|
| append-to-body | S'il faut ajouter le DatePicker au body | boolean | — | true |
|
||||||
|
|
||||||
### Options du Picker
|
### Options du Picker
|
||||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||||
|
|
|
||||||
|
|
@ -173,3 +173,5 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
|
||||||
| 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) | — | — |
|
||||||
|
| 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) |
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -111,6 +111,24 @@
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="block">
|
||||||
|
<span class="demonstration">多个月</span>
|
||||||
|
<el-date-picker
|
||||||
|
type="months"
|
||||||
|
v-model="value5"
|
||||||
|
placeholder="选择一个或多个月">
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<span class="demonstration">多个年</span>
|
||||||
|
<el-date-picker
|
||||||
|
type="years"
|
||||||
|
v-model="value6"
|
||||||
|
placeholder="选择一个或多个年">
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -119,7 +137,9 @@
|
||||||
value1: '',
|
value1: '',
|
||||||
value2: '',
|
value2: '',
|
||||||
value3: '',
|
value3: '',
|
||||||
value4: ''
|
value4: '',
|
||||||
|
value5: '',
|
||||||
|
value6: ''
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -395,7 +415,7 @@
|
||||||
| placeholder | 非范围选择时的占位内容 | string | — | — |
|
| placeholder | 非范围选择时的占位内容 | string | — | — |
|
||||||
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||||
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
|
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
|
||||||
| type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange | date |
|
| type | 显示类型 | string | year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange | date |
|
||||||
| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |
|
| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |
|
||||||
| align | 对齐方式 | string | left, center, right | left |
|
| align | 对齐方式 | string | left, center, right | left |
|
||||||
| popper-class | DatePicker 下拉框的类名 | string | — | — |
|
| popper-class | DatePicker 下拉框的类名 | string | — | — |
|
||||||
|
|
@ -409,6 +429,7 @@
|
||||||
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
|
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
|
||||||
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
|
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
|
||||||
| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
|
| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
|
||||||
|
| append-to-body | DetePicker 自身是否插入至 body 元素上。 | boolean | — | true |
|
||||||
|
|
||||||
### Picker Options
|
### Picker Options
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|
|
||||||
|
|
@ -176,3 +176,5 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
|
||||||
| 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) | — | — |
|
||||||
|
| define-back-color | 指定进度条底色（支持 hex 格式） | string | — | — |
|
||||||
|
| text-color | 指定进度条字体颜色（支持 hex 格式） | string | — | — |
|
||||||
|
|
|
||||||
|
|
@ -187,7 +187,7 @@
|
||||||
### Radio Events
|
### Radio Events
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|---------- |-------- |---------- |
|
|---------- |-------- |---------- |
|
||||||
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
| input | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||||
|
|
||||||
### Radio-group Attributes
|
### Radio-group Attributes
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|
@ -201,7 +201,7 @@
|
||||||
### Radio-group Events
|
### Radio-group Events
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|---------- |-------- |---------- |
|
|---------- |-------- |---------- |
|
||||||
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
| input | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||||
|
|
||||||
### Radio-button Attributes
|
### 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",
|
"path": "/result",
|
||||||
"title": "Result 结果"
|
"title": "Result 结果"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/statistic",
|
||||||
|
"title": "Statistic 统计数值"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -621,6 +625,10 @@
|
||||||
{
|
{
|
||||||
"path": "/drawer",
|
"path": "/drawer",
|
||||||
"title": "Drawer"
|
"title": "Drawer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/statistic",
|
||||||
|
"title": "Statistic"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -935,6 +943,10 @@
|
||||||
{
|
{
|
||||||
"path": "/drawer",
|
"path": "/drawer",
|
||||||
"title": "Drawer"
|
"title": "Drawer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/statistic",
|
||||||
|
"title": "Statistic"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -1249,6 +1261,10 @@
|
||||||
{
|
{
|
||||||
"path": "/drawer",
|
"path": "/drawer",
|
||||||
"title": "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.9":"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",
|
"name": "element-ui",
|
||||||
"version": "2.15.9",
|
"version": "2.15.12",
|
||||||
"description": "A Component Library for Vue.js.",
|
"description": "A Component Library for Vue.js.",
|
||||||
"main": "lib/element-ui.common.js",
|
"main": "lib/element-ui.common.js",
|
||||||
"files": [
|
"files": [
|
||||||
|
|
@ -59,6 +59,7 @@
|
||||||
},
|
},
|
||||||
"unpkg": "lib/index.js",
|
"unpkg": "lib/index.js",
|
||||||
"style": "lib/theme-chalk/index.css",
|
"style": "lib/theme-chalk/index.css",
|
||||||
|
"web-types": "./web-types.json",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"async-validator": "~1.8.1",
|
"async-validator": "~1.8.1",
|
||||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,14 @@
|
||||||
return NaN;
|
return NaN;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// remove the first element that satisfies `pred` from arr
|
||||||
|
// return a new array if modification occurs
|
||||||
|
// return the original array otherwise
|
||||||
|
const removeFromArray = function(arr, pred) {
|
||||||
|
const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred);
|
||||||
|
return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr;
|
||||||
|
};
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
disabledDate: {},
|
disabledDate: {},
|
||||||
|
|
@ -205,6 +213,13 @@
|
||||||
}
|
}
|
||||||
this.rangeState.selecting = false;
|
this.rangeState.selecting = false;
|
||||||
}
|
}
|
||||||
|
} else if (this.selectionMode === 'months') {
|
||||||
|
const value = this.value || [];
|
||||||
|
const year = this.date.getFullYear();
|
||||||
|
const newValue = arrayFindIndex(value, date => date.getFullYear() === year && date.getMonth() === month) >= 0
|
||||||
|
? removeFromArray(value, date => date.getTime() === newDate.getTime())
|
||||||
|
: [...value, newDate];
|
||||||
|
this.$emit('pick', newValue);
|
||||||
} else {
|
} else {
|
||||||
this.$emit('pick', month);
|
this.$emit('pick', month);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,8 @@
|
||||||
return val === null || (val instanceof Date && isDate(val));
|
return val === null || (val instanceof Date && isDate(val));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
date: {}
|
date: {},
|
||||||
|
selectionMode: {}
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -93,7 +94,16 @@
|
||||||
if (target.tagName === 'A') {
|
if (target.tagName === 'A') {
|
||||||
if (hasClass(target.parentNode, 'disabled')) return;
|
if (hasClass(target.parentNode, 'disabled')) return;
|
||||||
const year = target.textContent || target.innerText;
|
const year = target.textContent || target.innerText;
|
||||||
this.$emit('pick', Number(year));
|
if (this.selectionMode === 'years') {
|
||||||
|
const value = this.value || [];
|
||||||
|
const idx = arrayFindIndex(value, date => date.getFullYear() === Number(year));
|
||||||
|
const newValue = idx > -1
|
||||||
|
? [...value.slice(0, idx), ...value.slice(idx + 1)]
|
||||||
|
: [...value, new Date(year)];
|
||||||
|
this.$emit('pick', newValue);
|
||||||
|
} else {
|
||||||
|
this.$emit('pick', Number(year));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -102,6 +102,7 @@
|
||||||
<year-table
|
<year-table
|
||||||
v-show="currentView === 'year'"
|
v-show="currentView === 'year'"
|
||||||
@pick="handleYearPick"
|
@pick="handleYearPick"
|
||||||
|
:selection-mode="selectionMode"
|
||||||
:value="value"
|
:value="value"
|
||||||
:default-value="defaultValue ? new Date(defaultValue) : null"
|
:default-value="defaultValue ? new Date(defaultValue) : null"
|
||||||
:date="date"
|
:date="date"
|
||||||
|
|
@ -110,6 +111,7 @@
|
||||||
<month-table
|
<month-table
|
||||||
v-show="currentView === 'month'"
|
v-show="currentView === 'month'"
|
||||||
@pick="handleMonthPick"
|
@pick="handleMonthPick"
|
||||||
|
:selection-mode="selectionMode"
|
||||||
:value="value"
|
:value="value"
|
||||||
:default-value="defaultValue ? new Date(defaultValue) : null"
|
:default-value="defaultValue ? new Date(defaultValue) : null"
|
||||||
:date="date"
|
:date="date"
|
||||||
|
|
@ -121,13 +123,13 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="el-picker-panel__footer"
|
class="el-picker-panel__footer"
|
||||||
v-show="footerVisible && currentView === 'date'">
|
v-show="footerVisible && (currentView === 'date' || currentView === 'month' || currentView === 'year')">
|
||||||
<el-button
|
<el-button
|
||||||
size="mini"
|
size="mini"
|
||||||
type="text"
|
type="text"
|
||||||
class="el-picker-panel__link-btn"
|
class="el-picker-panel__link-btn"
|
||||||
@click="changeToNow"
|
@click="changeToNow"
|
||||||
v-show="selectionMode !== 'dates'">
|
v-show="selectionMode !== 'dates' && selectionMode !== 'months' && selectionMode !== 'years'">
|
||||||
{{ t('el.datepicker.now') }}
|
{{ t('el.datepicker.now') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
|
|
@ -190,6 +192,8 @@
|
||||||
|
|
||||||
value(val) {
|
value(val) {
|
||||||
if (this.selectionMode === 'dates' && this.value) return;
|
if (this.selectionMode === 'dates' && this.value) return;
|
||||||
|
if (this.selectionMode === 'months' && this.value) return;
|
||||||
|
if (this.selectionMode === 'years' && this.value) return;
|
||||||
if (isDate(val)) {
|
if (isDate(val)) {
|
||||||
this.date = new Date(val);
|
this.date = new Date(val);
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -215,6 +219,10 @@
|
||||||
}
|
}
|
||||||
} else if (newVal === 'dates') {
|
} else if (newVal === 'dates') {
|
||||||
this.currentView = 'date';
|
this.currentView = 'date';
|
||||||
|
} else if (newVal === 'years') {
|
||||||
|
this.currentView = 'year';
|
||||||
|
} else if (newVal === 'months') {
|
||||||
|
this.currentView = 'month';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -328,6 +336,8 @@
|
||||||
if (this.selectionMode === 'month') {
|
if (this.selectionMode === 'month') {
|
||||||
this.date = modifyDate(this.date, this.year, month, 1);
|
this.date = modifyDate(this.date, this.year, month, 1);
|
||||||
this.emit(this.date);
|
this.emit(this.date);
|
||||||
|
} else if (this.selectionMode === 'months') {
|
||||||
|
this.emit(month, true);
|
||||||
} else {
|
} else {
|
||||||
this.date = changeYearMonthAndClampDate(this.date, this.year, month);
|
this.date = changeYearMonthAndClampDate(this.date, this.year, month);
|
||||||
// TODO: should emit intermediate value ??
|
// TODO: should emit intermediate value ??
|
||||||
|
|
@ -358,6 +368,8 @@
|
||||||
if (this.selectionMode === 'year') {
|
if (this.selectionMode === 'year') {
|
||||||
this.date = modifyDate(this.date, year, 0, 1);
|
this.date = modifyDate(this.date, year, 0, 1);
|
||||||
this.emit(this.date);
|
this.emit(this.date);
|
||||||
|
} else if (this.selectionMode === 'years') {
|
||||||
|
this.emit(year, true);
|
||||||
} else {
|
} else {
|
||||||
this.date = changeYearMonthAndClampDate(this.date, year, this.month);
|
this.date = changeYearMonthAndClampDate(this.date, year, this.month);
|
||||||
// TODO: should emit intermediate value ??
|
// TODO: should emit intermediate value ??
|
||||||
|
|
@ -376,7 +388,7 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
confirm() {
|
confirm() {
|
||||||
if (this.selectionMode === 'dates') {
|
if (this.selectionMode === 'dates' || this.selectionMode === 'months' || this.selectionMode === 'years') {
|
||||||
this.emit(this.value);
|
this.emit(this.value);
|
||||||
} else {
|
} else {
|
||||||
// value were emitted in handle{Date,Time}Pick, nothing to update here
|
// value were emitted in handle{Date,Time}Pick, nothing to update here
|
||||||
|
|
@ -390,9 +402,9 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
resetView() {
|
resetView() {
|
||||||
if (this.selectionMode === 'month') {
|
if (this.selectionMode === 'month' || this.selectionMode === 'months') {
|
||||||
this.currentView = 'month';
|
this.currentView = 'month';
|
||||||
} else if (this.selectionMode === 'year') {
|
} else if (this.selectionMode === 'year' || this.selectionMode === 'years') {
|
||||||
this.currentView = 'year';
|
this.currentView = 'year';
|
||||||
} else {
|
} else {
|
||||||
this.currentView = 'date';
|
this.currentView = 'date';
|
||||||
|
|
@ -546,7 +558,7 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
footerVisible() {
|
footerVisible() {
|
||||||
return this.showTime || this.selectionMode === 'dates';
|
return this.showTime || this.selectionMode === 'dates' || this.selectionMode === 'months' || this.selectionMode === 'years';
|
||||||
},
|
},
|
||||||
|
|
||||||
visibleTime() {
|
visibleTime() {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<el-input
|
<el-input
|
||||||
class="el-date-editor"
|
class="el-date-editor"
|
||||||
:class="'el-date-editor--' + type"
|
:class="'el-date-editor--' + type"
|
||||||
:readonly="!editable || readonly || type === 'dates' || type === 'week'"
|
:readonly="!editable || readonly || type === 'dates' || type === 'week' || type === 'years' || type === 'months'"
|
||||||
:disabled="pickerDisabled"
|
:disabled="pickerDisabled"
|
||||||
:size="pickerSize"
|
:size="pickerSize"
|
||||||
:name="name"
|
:name="name"
|
||||||
|
|
@ -110,6 +110,7 @@ const NewPopper = {
|
||||||
const DEFAULT_FORMATS = {
|
const DEFAULT_FORMATS = {
|
||||||
date: 'yyyy-MM-dd',
|
date: 'yyyy-MM-dd',
|
||||||
month: 'yyyy-MM',
|
month: 'yyyy-MM',
|
||||||
|
months: 'yyyy-MM',
|
||||||
datetime: 'yyyy-MM-dd HH:mm:ss',
|
datetime: 'yyyy-MM-dd HH:mm:ss',
|
||||||
time: 'HH:mm:ss',
|
time: 'HH:mm:ss',
|
||||||
week: 'yyyywWW',
|
week: 'yyyywWW',
|
||||||
|
|
@ -117,7 +118,8 @@ const DEFAULT_FORMATS = {
|
||||||
daterange: 'yyyy-MM-dd',
|
daterange: 'yyyy-MM-dd',
|
||||||
monthrange: 'yyyy-MM',
|
monthrange: 'yyyy-MM',
|
||||||
datetimerange: 'yyyy-MM-dd HH:mm:ss',
|
datetimerange: 'yyyy-MM-dd HH:mm:ss',
|
||||||
year: 'yyyy'
|
year: 'yyyy',
|
||||||
|
years: 'yyyy'
|
||||||
};
|
};
|
||||||
const HAVE_TRIGGER_TYPES = [
|
const HAVE_TRIGGER_TYPES = [
|
||||||
'date',
|
'date',
|
||||||
|
|
@ -131,7 +133,9 @@ const HAVE_TRIGGER_TYPES = [
|
||||||
'monthrange',
|
'monthrange',
|
||||||
'timerange',
|
'timerange',
|
||||||
'datetimerange',
|
'datetimerange',
|
||||||
'dates'
|
'dates',
|
||||||
|
'months',
|
||||||
|
'years'
|
||||||
];
|
];
|
||||||
const DATE_FORMATTER = function(value, format) {
|
const DATE_FORMATTER = function(value, format) {
|
||||||
if (format === 'timestamp') return value.getTime();
|
if (format === 'timestamp') return value.getTime();
|
||||||
|
|
@ -255,6 +259,24 @@ const TYPE_VALUE_RESOLVER_MAP = {
|
||||||
return (typeof value === 'string' ? value.split(', ') : value)
|
return (typeof value === 'string' ? value.split(', ') : value)
|
||||||
.map(date => date instanceof Date ? date : DATE_PARSER(date, format));
|
.map(date => date instanceof Date ? date : DATE_PARSER(date, format));
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
months: {
|
||||||
|
formatter(value, format) {
|
||||||
|
return value.map(date => DATE_FORMATTER(date, format));
|
||||||
|
},
|
||||||
|
parser(value, format) {
|
||||||
|
return (typeof value === 'string' ? value.split(', ') : value)
|
||||||
|
.map(date => date instanceof Date ? date : DATE_PARSER(date, format));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
years: {
|
||||||
|
formatter(value, format) {
|
||||||
|
return value.map(date => DATE_FORMATTER(date, format));
|
||||||
|
},
|
||||||
|
parser(value, format) {
|
||||||
|
return (typeof value === 'string' ? value.split(', ') : value)
|
||||||
|
.map(date => date instanceof Date ? date : DATE_PARSER(date, format));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const PLACEMENT_MAP = {
|
const PLACEMENT_MAP = {
|
||||||
|
|
@ -490,6 +512,10 @@ export default {
|
||||||
return 'year';
|
return 'year';
|
||||||
} else if (this.type === 'dates') {
|
} else if (this.type === 'dates') {
|
||||||
return 'dates';
|
return 'dates';
|
||||||
|
} else if (this.type === 'months') {
|
||||||
|
return 'months';
|
||||||
|
} else if (this.type === 'years') {
|
||||||
|
return 'years';
|
||||||
}
|
}
|
||||||
|
|
||||||
return 'day';
|
return 'day';
|
||||||
|
|
@ -512,7 +538,7 @@ export default {
|
||||||
} else if (this.userInput !== null) {
|
} else if (this.userInput !== null) {
|
||||||
return this.userInput;
|
return this.userInput;
|
||||||
} else if (formattedValue) {
|
} else if (formattedValue) {
|
||||||
return this.type === 'dates'
|
return (this.type === 'dates' || this.type === 'years' || this.type === 'months')
|
||||||
? formattedValue.join(', ')
|
? formattedValue.join(', ')
|
||||||
: formattedValue;
|
: formattedValue;
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -714,7 +740,7 @@ export default {
|
||||||
if (!this.pickerVisible) return;
|
if (!this.pickerVisible) return;
|
||||||
this.pickerVisible = false;
|
this.pickerVisible = false;
|
||||||
|
|
||||||
if (this.type === 'dates') {
|
if (this.type === 'dates' || this.type === 'years' || this.type === 'months') {
|
||||||
// restore to former value
|
// restore to former value
|
||||||
const oldValue = parseAsFormatAndType(this.valueOnOpen, this.valueFormat, this.type, this.rangeSeparator) || this.valueOnOpen;
|
const oldValue = parseAsFormatAndType(this.valueOnOpen, this.valueFormat, this.type, this.rangeSeparator) || this.valueOnOpen;
|
||||||
this.emitInput(oldValue);
|
this.emitInput(oldValue);
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,9 @@
|
||||||
aria-valuemax="100"
|
aria-valuemax="100"
|
||||||
>
|
>
|
||||||
<div class="el-progress-bar" v-if="type === 'line'">
|
<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__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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
<path
|
<path
|
||||||
class="el-progress-circle__track"
|
class="el-progress-circle__track"
|
||||||
:d="trackPath"
|
:d="trackPath"
|
||||||
stroke="#e5e9f2"
|
:stroke="defineBackColor"
|
||||||
:stroke-width="relativeStrokeWidth"
|
:stroke-width="relativeStrokeWidth"
|
||||||
fill="none"
|
fill="none"
|
||||||
:style="trailPathStyle"></path>
|
:style="trailPathStyle"></path>
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
<div
|
<div
|
||||||
class="el-progress__text"
|
class="el-progress__text"
|
||||||
v-if="showText && !textInside"
|
v-if="showText && !textInside"
|
||||||
:style="{fontSize: progressTextSize + 'px'}"
|
:style="{fontSize: progressTextSize + 'px', color:textColor}"
|
||||||
>
|
>
|
||||||
<template v-if="!status">{{content}}</template>
|
<template v-if="!status">{{content}}</template>
|
||||||
<i v-else :class="iconClass"></i>
|
<i v-else :class="iconClass"></i>
|
||||||
|
|
@ -93,6 +93,14 @@
|
||||||
type: [String, Array, Function],
|
type: [String, Array, Function],
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
|
defineBackColor: {
|
||||||
|
type: [String, Array, Function],
|
||||||
|
default: '#ebeef5'
|
||||||
|
},
|
||||||
|
textColor: {
|
||||||
|
type: [String, Array, Function],
|
||||||
|
default: '#606266'
|
||||||
|
},
|
||||||
format: Function
|
format: Function
|
||||||
},
|
},
|
||||||
computed: {
|
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",
|
"name": "element-theme-chalk",
|
||||||
"version": "2.15.9",
|
"version": "2.15.12",
|
||||||
"description": "Element component chalk theme.",
|
"description": "Element component chalk theme.",
|
||||||
"main": "lib/index.css",
|
"main": "lib/index.css",
|
||||||
"style": "lib/index.css",
|
"style": "lib/index.css",
|
||||||
|
|
|
||||||
|
|
@ -77,6 +77,7 @@
|
||||||
@import "./cascader-panel.scss";
|
@import "./cascader-panel.scss";
|
||||||
@import "./avatar.scss";
|
@import "./avatar.scss";
|
||||||
@import "./drawer.scss";
|
@import "./drawer.scss";
|
||||||
|
@import "./statistic.scss";
|
||||||
@import "./popconfirm.scss";
|
@import "./popconfirm.scss";
|
||||||
@import "./skeleton.scss";
|
@import "./skeleton.scss";
|
||||||
@import "./skeleton-item.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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -23,7 +23,7 @@ export const getChildState = node => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const reInitChecked = function(node) {
|
const reInitChecked = function(node) {
|
||||||
if (node.childNodes.length === 0) return;
|
if (node.childNodes.length === 0 || node.loading) return;
|
||||||
|
|
||||||
const {all, none, half} = getChildState(node.childNodes);
|
const {all, none, half} = getChildState(node.childNodes);
|
||||||
if (all) {
|
if (all) {
|
||||||
|
|
@ -463,12 +463,11 @@ export default class Node {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
|
|
||||||
const resolve = (children) => {
|
const resolve = (children) => {
|
||||||
this.loaded = true;
|
|
||||||
this.loading = false;
|
|
||||||
this.childNodes = [];
|
this.childNodes = [];
|
||||||
|
|
||||||
this.doCreateChildren(children, defaultProps);
|
this.doCreateChildren(children, defaultProps);
|
||||||
|
this.loaded = true;
|
||||||
|
this.loading = false;
|
||||||
this.updateLeafState();
|
this.updateLeafState();
|
||||||
if (callback) {
|
if (callback) {
|
||||||
callback.call(this, children);
|
callback.call(this, children);
|
||||||
|
|
|
||||||
|
|
@ -81,6 +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 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';
|
||||||
|
|
@ -168,6 +169,7 @@ const components = [
|
||||||
CascaderPanel,
|
CascaderPanel,
|
||||||
Avatar,
|
Avatar,
|
||||||
Drawer,
|
Drawer,
|
||||||
|
Statistic,
|
||||||
Popconfirm,
|
Popconfirm,
|
||||||
Skeleton,
|
Skeleton,
|
||||||
SkeletonItem,
|
SkeletonItem,
|
||||||
|
|
@ -210,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
version: '2.15.9',
|
version: '2.15.12',
|
||||||
locale: locale.use,
|
locale: locale.use,
|
||||||
i18n: locale.i18n,
|
i18n: locale.i18n,
|
||||||
install,
|
install,
|
||||||
|
|
@ -296,6 +298,7 @@ export default {
|
||||||
CascaderPanel,
|
CascaderPanel,
|
||||||
Avatar,
|
Avatar,
|
||||||
Drawer,
|
Drawer,
|
||||||
|
Statistic,
|
||||||
Popconfirm,
|
Popconfirm,
|
||||||
Skeleton,
|
Skeleton,
|
||||||
SkeletonItem,
|
SkeletonItem,
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ export default {
|
||||||
selectTime: 'Pilih Masa',
|
selectTime: 'Pilih Masa',
|
||||||
startDate: 'Tarikh Mula',
|
startDate: 'Tarikh Mula',
|
||||||
startTime: 'Masa Mula',
|
startTime: 'Masa Mula',
|
||||||
endDate: 'Tarik Tamat',
|
endDate: 'Tarikh Tamat',
|
||||||
endTime: 'Masa Tamat',
|
endTime: 'Masa Tamat',
|
||||||
prevYear: 'Tahun Lepas',
|
prevYear: 'Tahun Lepas',
|
||||||
nextYear: 'Tahun Depan',
|
nextYear: 'Tahun Depan',
|
||||||
|
|
@ -33,7 +33,6 @@ export default {
|
||||||
month10: 'Oktober',
|
month10: 'Oktober',
|
||||||
month11: 'November',
|
month11: 'November',
|
||||||
month12: 'Disember',
|
month12: 'Disember',
|
||||||
// week: '周次',
|
|
||||||
weeks: {
|
weeks: {
|
||||||
sun: 'Ahad',
|
sun: 'Ahad',
|
||||||
mon: 'Isnin',
|
mon: 'Isnin',
|
||||||
|
|
@ -68,7 +67,7 @@ export default {
|
||||||
noMatch: 'Tiada maklumat yang sepadan',
|
noMatch: 'Tiada maklumat yang sepadan',
|
||||||
loading: 'Sedang dimuat turun',
|
loading: 'Sedang dimuat turun',
|
||||||
placeholder: 'Sila pilih',
|
placeholder: 'Sila pilih',
|
||||||
noData: 'Tiada maklumat buat sementara'
|
noData: 'Tiada maklumat'
|
||||||
},
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
goto: 'Seterusnya',
|
goto: 'Seterusnya',
|
||||||
|
|
@ -80,23 +79,23 @@ export default {
|
||||||
title: 'Tip',
|
title: 'Tip',
|
||||||
confirm: 'Sah',
|
confirm: 'Sah',
|
||||||
cancel: 'Batal',
|
cancel: 'Batal',
|
||||||
error: 'Data yang diisikan tidak sah!'
|
error: 'Data yang diisi tidak sah!'
|
||||||
},
|
},
|
||||||
upload: {
|
upload: {
|
||||||
deleteTip: 'Tekan "Padam" untuk memadam',
|
deleteTip: 'Tekan "Padam" untuk memadam',
|
||||||
delete: 'Padam',
|
delete: 'Padam',
|
||||||
preview: 'Semak gambar',
|
preview: 'Pratonton gambar',
|
||||||
continue: 'Meneruskan muat naik'
|
continue: 'Meneruskan muat naik'
|
||||||
},
|
},
|
||||||
table: {
|
table: {
|
||||||
emptyText: 'Tiada maklumat buat sementara',
|
emptyText: 'Tiada maklumat',
|
||||||
confirmFilter: 'Tapis',
|
confirmFilter: 'Tapis',
|
||||||
resetFilter: 'Set Semula',
|
resetFilter: 'Set Semula',
|
||||||
clearFilter: 'Semua',
|
clearFilter: 'Semua',
|
||||||
sumText: 'Jumlah'
|
sumText: 'Jumlah'
|
||||||
},
|
},
|
||||||
tree: {
|
tree: {
|
||||||
emptyText: 'Tiada maklumat buat sementara'
|
emptyText: 'Tiada maklumat'
|
||||||
},
|
},
|
||||||
transfer: {
|
transfer: {
|
||||||
noMatch: 'Tiada maklumat yang sepadan',
|
noMatch: 'Tiada maklumat yang sepadan',
|
||||||
|
|
@ -117,7 +116,7 @@ export default {
|
||||||
cancelButtonText: 'Batal'
|
cancelButtonText: 'Batal'
|
||||||
},
|
},
|
||||||
empty: {
|
empty: {
|
||||||
description: 'Tiada maklumat buat sementara'
|
description: 'Tiada maklumat'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -16,10 +16,10 @@ export default {
|
||||||
startTime: 'Start Tidspunkt',
|
startTime: 'Start Tidspunkt',
|
||||||
endDate: 'Sluttdato',
|
endDate: 'Sluttdato',
|
||||||
endTime: 'Sluttidspunkt',
|
endTime: 'Sluttidspunkt',
|
||||||
prevYear: 'Previous Year', // to be translated
|
prevYear: 'Forrige År',
|
||||||
nextYear: 'Next Year', // to be translated
|
nextYear: 'Neste År',
|
||||||
prevMonth: 'Previous Month', // to be translated
|
prevMonth: 'Forrige Måned',
|
||||||
nextMonth: 'Next Month', // to be translated
|
nextMonth: 'Neste Måned',
|
||||||
year: '',
|
year: '',
|
||||||
month1: 'Januar',
|
month1: 'Januar',
|
||||||
month2: 'Februar',
|
month2: 'Februar',
|
||||||
|
|
@ -82,7 +82,7 @@ export default {
|
||||||
error: 'Ugyldig input'
|
error: 'Ugyldig input'
|
||||||
},
|
},
|
||||||
upload: {
|
upload: {
|
||||||
deleteTip: 'press delete to remove', // to be translated
|
deleteTip: 'trykk slett for å ta bort',
|
||||||
delete: 'Slett',
|
delete: 'Slett',
|
||||||
preview: 'Forhåndsvisning',
|
preview: 'Forhåndsvisning',
|
||||||
continue: 'Fortsett'
|
continue: 'Fortsett'
|
||||||
|
|
@ -92,7 +92,7 @@ export default {
|
||||||
confirmFilter: 'Bekreft',
|
confirmFilter: 'Bekreft',
|
||||||
resetFilter: 'Tilbakestill',
|
resetFilter: 'Tilbakestill',
|
||||||
clearFilter: 'Alle',
|
clearFilter: 'Alle',
|
||||||
sumText: 'Sum' // to be translated
|
sumText: 'Sum'
|
||||||
},
|
},
|
||||||
tree: {
|
tree: {
|
||||||
emptyText: 'Ingen Data'
|
emptyText: 'Ingen Data'
|
||||||
|
|
@ -100,20 +100,20 @@ export default {
|
||||||
transfer: {
|
transfer: {
|
||||||
noMatch: 'Ingen samsvarende data',
|
noMatch: 'Ingen samsvarende data',
|
||||||
noData: 'Ingen data',
|
noData: 'Ingen data',
|
||||||
titles: ['List 1', 'List 2'], // to be translated
|
titles: ['Liste 1', 'Liste 2'],
|
||||||
filterPlaceholder: 'Enter keyword', // to be translated
|
filterPlaceholder: 'Tast inn nøkkelord',
|
||||||
noCheckedFormat: '{total} items', // to be translated
|
noCheckedFormat: '{total} gjenstander',
|
||||||
hasCheckedFormat: '{checked}/{total} checked' // to be translated
|
hasCheckedFormat: '{checked}/{total} sjekket'
|
||||||
},
|
},
|
||||||
image: {
|
image: {
|
||||||
error: 'FAILED' // to be translated
|
error: 'MISLYKTES'
|
||||||
},
|
},
|
||||||
pageHeader: {
|
pageHeader: {
|
||||||
title: 'Back' // to be translated
|
title: 'Tilbake'
|
||||||
},
|
},
|
||||||
popconfirm: {
|
popconfirm: {
|
||||||
confirmButtonText: 'Yes', // to be translated
|
confirmButtonText: 'Ja',
|
||||||
cancelButtonText: 'No' // to be translated
|
cancelButtonText: 'Nei'
|
||||||
},
|
},
|
||||||
empty: {
|
empty: {
|
||||||
description: 'Ingen Data'
|
description: 'Ingen Data'
|
||||||
|
|
|
||||||
|
|
@ -48,19 +48,9 @@ export const parseDate = function(string, format) {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getDayCountOfMonth = function(year, month) {
|
export const getDayCountOfMonth = function(year, month) {
|
||||||
if (month === 3 || month === 5 || month === 8 || month === 10) {
|
if (isNaN(+month)) return 31;
|
||||||
return 30;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (month === 1) {
|
return new Date(year, +month + 1, 0).getDate();
|
||||||
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
|
|
||||||
return 29;
|
|
||||||
} else {
|
|
||||||
return 28;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return 31;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getDayCountOfYear = function(year) {
|
export const getDayCountOfYear = function(year) {
|
||||||
|
|
|
||||||
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;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
@ -1,3 +1,352 @@
|
||||||
|
|
||||||
|
import Vue, { PluginObject } from 'vue'
|
||||||
|
import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
|
||||||
|
|
||||||
|
import { ElAlert } from './alert'
|
||||||
|
import { ElAside } from './aside'
|
||||||
|
import { ElAutocomplete } from './autocomplete'
|
||||||
|
import { ElBadge } from './badge'
|
||||||
|
import { ElBreadcrumb } from './breadcrumb'
|
||||||
|
import { ElBreadcrumbItem } from './breadcrumb-item'
|
||||||
|
import { ElButton } from './button'
|
||||||
|
import { ElButtonGroup } from './button-group'
|
||||||
|
import { ElCard } from './card'
|
||||||
|
import { ElCarousel } from './carousel'
|
||||||
|
import { ElCarouselItem } from './carousel-item'
|
||||||
|
import { ElCascader } from './cascader'
|
||||||
|
import { ElCheckbox } from './checkbox'
|
||||||
|
import { ElCheckboxButton } from './checkbox-button'
|
||||||
|
import { ElCheckboxGroup } from './checkbox-group'
|
||||||
|
import { ElCol } from './col'
|
||||||
|
import { ElCollapse } from './collapse'
|
||||||
|
import { ElCollapseItem } from './collapse-item'
|
||||||
|
import { ElColorPicker } from './color-picker'
|
||||||
|
import { ElContainer } from './container'
|
||||||
|
import { ElDatePicker } from './date-picker'
|
||||||
|
import { ElDialog } from './dialog'
|
||||||
|
import { ElDropdown } from './dropdown'
|
||||||
|
import { ElDropdownItem } from './dropdown-item'
|
||||||
|
import { ElDropdownMenu } from './dropdown-menu'
|
||||||
|
import { ElFooter } from './footer'
|
||||||
|
import { ElForm } from './form'
|
||||||
|
import { ElFormItem } from './form-item'
|
||||||
|
import { ElHeader } from './header'
|
||||||
|
import { ElInput } from './input'
|
||||||
|
import { ElInputNumber } from './input-number'
|
||||||
|
import { ElLoading } from './loading'
|
||||||
|
import { ElMain } from './main'
|
||||||
|
import { ElMenu } from './menu'
|
||||||
|
import { ElMenuItem } from './menu-item'
|
||||||
|
import { ElMenuItemGroup } from './menu-item-group'
|
||||||
|
import { ElMessage } from './message'
|
||||||
|
import { ElMessageBox } from './message-box'
|
||||||
|
import { ElNotification } from './notification'
|
||||||
|
import { ElOption } from './option'
|
||||||
|
import { ElOptionGroup } from './option-group'
|
||||||
|
import { ElPagination } from './pagination'
|
||||||
|
import { ElPopover } from './popover'
|
||||||
|
import { ElProgress } from './progress'
|
||||||
|
import { ElRate } from './rate'
|
||||||
|
import { ElRadio } from './radio'
|
||||||
|
import { ElRadioButton } from './radio-button'
|
||||||
|
import { ElRadioGroup } from './radio-group'
|
||||||
|
import { ElRow } from './row'
|
||||||
|
import { ElSelect } from './select'
|
||||||
|
import { ElSlider } from './slider'
|
||||||
|
import { ElStep } from './step'
|
||||||
|
import { ElSteps } from './steps'
|
||||||
|
import { ElSubmenu } from './submenu'
|
||||||
|
import { ElSwitch } from './switch'
|
||||||
|
import { ElTable } from './table'
|
||||||
|
import { ElTableColumn } from './table-column'
|
||||||
|
import { ElTag } from './tag'
|
||||||
|
import { ElTabs } from './tabs'
|
||||||
|
import { ElTabPane } from './tab-pane'
|
||||||
|
import { ElTimeline } from './timeline'
|
||||||
|
import { ElTimelineItem } from './timeline-item'
|
||||||
|
import { ElTimePicker } from './time-picker'
|
||||||
|
import { ElTimeSelect } from './time-select'
|
||||||
|
import { ElTooltip } from './tooltip'
|
||||||
|
import { ElTransfer } from './transfer'
|
||||||
|
import { ElTree, TreeData } from './tree'
|
||||||
|
import { ElUpload } from './upload'
|
||||||
|
import { ElLink } from './link'
|
||||||
|
import { ElDivider } from './divider'
|
||||||
|
import { ElIcon } from './icon'
|
||||||
|
import { ElCalendar } from './calendar'
|
||||||
|
import { ElImage } from './image'
|
||||||
|
import { ElBacktop } from './backtop'
|
||||||
|
import { ElInfiniteScroll } from './infinite-scroll'
|
||||||
|
import { ElPageHeader } from './page-header'
|
||||||
|
import { ElAvatar } from './avatar'
|
||||||
|
import { ElDrawer } from './drawer'
|
||||||
|
|
||||||
|
import { ElStatistic } from './statistic'
|
||||||
|
|
||||||
|
export interface InstallationOptions {
|
||||||
|
locale: any,
|
||||||
|
i18n: any,
|
||||||
|
size: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/** The version of element-ui */
|
||||||
|
export const version: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Install all element-ui components into Vue.
|
||||||
|
* Please do not invoke this method directly.
|
||||||
|
* Call `Vue.use(ElementUI)` to install.
|
||||||
|
*/
|
||||||
|
export function install (vue: typeof Vue, options: InstallationOptions): void
|
||||||
|
|
||||||
|
/** ElementUI component common definition */
|
||||||
|
export type Component = ElementUIComponent
|
||||||
|
|
||||||
|
/** Component size definition for button, input, etc */
|
||||||
|
export type ComponentSize = ElementUIComponentSize
|
||||||
|
|
||||||
|
/** Horizontal alignment */
|
||||||
|
export type HorizontalAlignment = ElementUIHorizontalAlignment
|
||||||
|
|
||||||
|
/** Show animation while loading data */
|
||||||
|
export const Loading: ElLoading
|
||||||
|
|
||||||
|
/** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */
|
||||||
|
export const Message: ElMessage
|
||||||
|
|
||||||
|
/** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */
|
||||||
|
export const MessageBox: ElMessageBox
|
||||||
|
|
||||||
|
/** Displays a global notification message at the upper right corner of the page */
|
||||||
|
export const Notification: ElNotification
|
||||||
|
|
||||||
|
// TS cannot merge imported class with namespace, so declare subclasses instead
|
||||||
|
|
||||||
|
/** Alert Component */
|
||||||
|
export class Alert extends ElAlert {}
|
||||||
|
|
||||||
|
/** Aside Component */
|
||||||
|
export class Aside extends ElAside {}
|
||||||
|
|
||||||
|
/** Autocomplete Component */
|
||||||
|
export class Autocomplete extends ElAutocomplete {}
|
||||||
|
|
||||||
|
/** Bagde Component */
|
||||||
|
export class Badge extends ElBadge {}
|
||||||
|
|
||||||
|
/** Breadcrumb Component */
|
||||||
|
export class Breadcrumb extends ElBreadcrumb {}
|
||||||
|
|
||||||
|
/** Breadcrumb Item Component */
|
||||||
|
export class BreadcrumbItem extends ElBreadcrumbItem {}
|
||||||
|
|
||||||
|
/** Button Component */
|
||||||
|
export class Button extends ElButton {}
|
||||||
|
|
||||||
|
/** Button Group Component */
|
||||||
|
export class ButtonGroup extends ElButtonGroup {}
|
||||||
|
|
||||||
|
/** Card Component */
|
||||||
|
export class Card extends ElCard {}
|
||||||
|
|
||||||
|
/** Cascader Component */
|
||||||
|
export class Cascader extends ElCascader {}
|
||||||
|
|
||||||
|
/** Carousel Component */
|
||||||
|
export class Carousel extends ElCarousel {}
|
||||||
|
|
||||||
|
/** Carousel Item Component */
|
||||||
|
export class CarouselItem extends ElCarouselItem {}
|
||||||
|
|
||||||
|
/** Checkbox Component */
|
||||||
|
export class Checkbox extends ElCheckbox {}
|
||||||
|
|
||||||
|
/** Checkbox Button Component */
|
||||||
|
export class CheckboxButton extends ElCheckboxButton {}
|
||||||
|
|
||||||
|
/** Checkbox Group Component */
|
||||||
|
export class CheckboxGroup extends ElCheckboxGroup {}
|
||||||
|
|
||||||
|
/** Colunm Layout Component */
|
||||||
|
export class Col extends ElCol {}
|
||||||
|
|
||||||
|
/** Collapse Component */
|
||||||
|
export class Collapse extends ElCollapse {}
|
||||||
|
|
||||||
|
/** Collapse Item Component */
|
||||||
|
export class CollapseItem extends ElCollapseItem {}
|
||||||
|
|
||||||
|
/** Color Picker Component */
|
||||||
|
export class ColorPicker extends ElColorPicker {}
|
||||||
|
|
||||||
|
/** Container Component */
|
||||||
|
export class Container extends ElContainer {}
|
||||||
|
|
||||||
|
/** Date Picker Component */
|
||||||
|
export class DatePicker extends ElDatePicker {}
|
||||||
|
|
||||||
|
/** Dialog Component */
|
||||||
|
export class Dialog extends ElDialog {}
|
||||||
|
|
||||||
|
/** Dropdown Component */
|
||||||
|
export class Dropdown extends ElDropdown {}
|
||||||
|
|
||||||
|
/** Dropdown Item Component */
|
||||||
|
export class DropdownItem extends ElDropdownItem {}
|
||||||
|
|
||||||
|
/** Dropdown Menu Component */
|
||||||
|
export class DropdownMenu extends ElDropdownMenu {}
|
||||||
|
|
||||||
|
/** Footer Component */
|
||||||
|
export class Footer extends ElFooter {}
|
||||||
|
|
||||||
|
/** Form Component */
|
||||||
|
export class Form extends ElForm {}
|
||||||
|
|
||||||
|
/** Form Item Component */
|
||||||
|
export class FormItem extends ElFormItem {}
|
||||||
|
|
||||||
|
/** Header Component */
|
||||||
|
export class Header extends ElHeader {}
|
||||||
|
|
||||||
|
/** Input Component */
|
||||||
|
export class Input extends ElInput {}
|
||||||
|
|
||||||
|
/** Input Number Component */
|
||||||
|
export class InputNumber extends ElInputNumber {}
|
||||||
|
|
||||||
|
/** Main Component */
|
||||||
|
export class Main extends ElMain {}
|
||||||
|
|
||||||
|
/** Menu that provides navigation for your website */
|
||||||
|
export class Menu extends ElMenu {}
|
||||||
|
|
||||||
|
/** Menu Item Component */
|
||||||
|
export class MenuItem extends ElMenuItem {}
|
||||||
|
|
||||||
|
/** Menu Item Group Component */
|
||||||
|
export class MenuItemGroup extends ElMenuItemGroup {}
|
||||||
|
|
||||||
|
/** Dropdown Select Option Component */
|
||||||
|
export class Option extends ElOption {}
|
||||||
|
|
||||||
|
/** Dropdown Select Option Group Component */
|
||||||
|
export class OptionGroup extends ElOptionGroup {}
|
||||||
|
|
||||||
|
/** Pagination Component */
|
||||||
|
export class Pagination extends ElPagination {}
|
||||||
|
|
||||||
|
/** Popover Component */
|
||||||
|
export class Popover extends ElPopover {}
|
||||||
|
|
||||||
|
/** Progress Component */
|
||||||
|
export class Progress extends ElProgress {}
|
||||||
|
|
||||||
|
/** Rate Component */
|
||||||
|
export class Rate extends ElRate {}
|
||||||
|
|
||||||
|
/** Radio Component */
|
||||||
|
export class Radio extends ElRadio {}
|
||||||
|
|
||||||
|
/** Radio Button Component */
|
||||||
|
export class RadioButton extends ElRadioButton {}
|
||||||
|
|
||||||
|
/** Radio Group Component */
|
||||||
|
export class RadioGroup extends ElRadioGroup {}
|
||||||
|
|
||||||
|
/** Row Layout Component */
|
||||||
|
export class Row extends ElRow {}
|
||||||
|
|
||||||
|
/** Dropdown Select Component */
|
||||||
|
export class Select extends ElSelect {}
|
||||||
|
|
||||||
|
/** Slider Component */
|
||||||
|
export class Slider extends ElSlider {}
|
||||||
|
|
||||||
|
/** Step Component */
|
||||||
|
export class Step extends ElStep {}
|
||||||
|
|
||||||
|
/** Steps Component */
|
||||||
|
export class Steps extends ElSteps {}
|
||||||
|
|
||||||
|
/** Submenu Component */
|
||||||
|
export class Submenu extends ElSubmenu {}
|
||||||
|
|
||||||
|
/** Switch Component */
|
||||||
|
export class Switch extends ElSwitch {}
|
||||||
|
|
||||||
|
/** Table Component */
|
||||||
|
export class Table extends ElTable {}
|
||||||
|
|
||||||
|
/** Table Column Component */
|
||||||
|
export class TableColumn extends ElTableColumn {}
|
||||||
|
|
||||||
|
/** Tabs Component */
|
||||||
|
export class Tabs extends ElTabs {}
|
||||||
|
|
||||||
|
/** Tab Pane Component */
|
||||||
|
export class TabPane extends ElTabPane {}
|
||||||
|
|
||||||
|
/** Tag Component */
|
||||||
|
export class Tag extends ElTag {}
|
||||||
|
|
||||||
|
/** Timeline Component */
|
||||||
|
export class Timeline extends ElTimeline {}
|
||||||
|
|
||||||
|
/** Timeline Item Component */
|
||||||
|
export class TimelineItem extends ElTimelineItem {}
|
||||||
|
|
||||||
|
/** TimePicker Component */
|
||||||
|
export class TimePicker extends ElTimePicker {}
|
||||||
|
|
||||||
|
/** TimeSelect Component */
|
||||||
|
export class TimeSelect extends ElTimeSelect {}
|
||||||
|
|
||||||
|
/** Tooltip Component */
|
||||||
|
export class Tooltip extends ElTooltip {}
|
||||||
|
|
||||||
|
/** Transfer Component */
|
||||||
|
export class Transfer extends ElTransfer {}
|
||||||
|
|
||||||
|
/** Tree Component */
|
||||||
|
export class Tree<K = any, D = TreeData> extends ElTree<K, D> {}
|
||||||
|
|
||||||
|
/** Upload Component */
|
||||||
|
export class Upload extends ElUpload {}
|
||||||
|
|
||||||
|
/** Divider Component */
|
||||||
|
export class Divider extends ElDivider {}
|
||||||
|
|
||||||
|
/** Link Component */
|
||||||
|
export class Link extends ElLink {}
|
||||||
|
|
||||||
|
/** Image Component */
|
||||||
|
export class Image extends ElImage {}
|
||||||
|
|
||||||
|
/** Icon Component */
|
||||||
|
export class Icon extends ElIcon {}
|
||||||
|
|
||||||
|
/** Calendar Component */
|
||||||
|
export class Calendar extends ElCalendar {}
|
||||||
|
|
||||||
|
/** Backtop Component */
|
||||||
|
export class Backtop extends ElBacktop {}
|
||||||
|
|
||||||
|
/** InfiniteScroll Directive */
|
||||||
|
export const InfiniteScroll: PluginObject<ElInfiniteScroll>;
|
||||||
|
|
||||||
|
/** PageHeader Component */
|
||||||
|
export class PageHeader extends ElPageHeader {}
|
||||||
|
|
||||||
|
/** Avatar Component */
|
||||||
|
export class Avatar extends ElAvatar {}
|
||||||
|
|
||||||
|
/** Drawer Component */
|
||||||
|
export class Drawer extends ElDrawer {}
|
||||||
|
|
||||||
|
/** Statistic Component */
|
||||||
|
export class Statistic extends ElStatistic {}
|
||||||
|
|
||||||
import Vue, { PluginObject } from 'vue'
|
import Vue, { PluginObject } from 'vue'
|
||||||
import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
|
import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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