mirror of https://github.com/ElemeFE/element
Merge branch 'ElemeFE:dev' into dev
wuyadan
GitHub
commit
20996a353a
|
|
@ -1,5 +1,6 @@
|
|||
src/utils/popper.js
|
||||
src/utils/date.js
|
||||
src/utils/lodash.js
|
||||
examples/play
|
||||
*.sh
|
||||
node_modules
|
||||
|
|
|
|||
|
|
@ -22,3 +22,4 @@ coverage
|
|||
waiter.config.js
|
||||
build/bin/algolia-key.js
|
||||
.envrc
|
||||
.history/
|
||||
|
|
@ -1,5 +1,89 @@
|
|||
## Changelog
|
||||
|
||||
### 2.15.13
|
||||
|
||||
*2023-02-12*
|
||||
|
||||
#### Bug fixes
|
||||
- Docs
|
||||
- Fix Statistic docs (#22383 by @JUST-Limbo)
|
||||
- Fix Input docs (#22093 by @lm312)
|
||||
- Fix en-US docs (#22268 #22269 #22270 by @Hazel-Lin)
|
||||
- Fix Pagination docs (#22288 by @xujintai123)
|
||||
- Fix: Links docs (#22370 by @itmier)
|
||||
- Statistics
|
||||
- fix slot display bug (#22375 by @webvs2)
|
||||
- Chore
|
||||
- missing web-type after publishing (#22271 by @loosheng)
|
||||
#### Optimization
|
||||
- InputNumber
|
||||
- Fix touch one click trigger twice on the window touch pad (#22185 by @mrsai)
|
||||
- Image
|
||||
- Add initialIndex prop (#22346 by @inkroom)
|
||||
- Statistics
|
||||
- Updated countdown feature to localize lodash Closes (#22260 by @webvs2)
|
||||
- Update code and doc (#22276 by @webvs2)
|
||||
- Other
|
||||
- fix web-types type props (#22281 by @whzxc)
|
||||
|
||||
### 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
|
||||
|
||||
*2022-06-02*
|
||||
|
|
@ -18,7 +102,7 @@
|
|||
- Fix Calendar docs (#21814 by @GoJam11)
|
||||
- Fix TimePicker docs (#21803 by @Alanscut)
|
||||
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
||||
- 其他
|
||||
- Other
|
||||
- Fix codepen display bug (#21863 by @bofeng)
|
||||
|
||||
#### Optimization
|
||||
|
|
|
|||
|
|
@ -1,5 +1,89 @@
|
|||
## Changelog
|
||||
|
||||
### 2.15.13
|
||||
|
||||
*2023-02-12*
|
||||
|
||||
#### Bug fixes
|
||||
- Docs
|
||||
- Fix Statistic docs (#22383 by @JUST-Limbo)
|
||||
- Fix Input docs (#22093 by @lm312)
|
||||
- Fix en-US docs (#22268 #22269 #22270 by @Hazel-Lin)
|
||||
- Fix Pagination docs (#22288 by @xujintai123)
|
||||
- Fix: Links docs (#22370 by @itmier)
|
||||
- Statistics
|
||||
- fix slot display bug (#22375 by @webvs2)
|
||||
- Chore
|
||||
- missing web-type after publishing (#22271 by @loosheng)
|
||||
#### Optimization
|
||||
- InputNumber
|
||||
- Fix touch one click trigger twice on the window touch pad (#22185 by @mrsai)
|
||||
- Image
|
||||
- Add initialIndex prop (#22346 by @inkroom)
|
||||
- Statistics
|
||||
- Updated countdown feature to localize lodash Closes (#22260 by @webvs2)
|
||||
- Update code and doc (#22276 by @webvs2)
|
||||
- Other
|
||||
- fix web-types type props (#22281 by @whzxc)
|
||||
|
||||
### 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
|
||||
|
||||
*2022-06-02*
|
||||
|
|
@ -18,7 +102,7 @@
|
|||
- Fix Calendar docs (#21814 by @GoJam11)
|
||||
- Fix TimePicker docs (#21803 by @Alanscut)
|
||||
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
||||
- 其他
|
||||
- Other
|
||||
- Fix codepen display bug (#21863 by @bofeng)
|
||||
|
||||
#### Optimization
|
||||
|
|
|
|||
|
|
@ -1,5 +1,89 @@
|
|||
## Changelog
|
||||
|
||||
### 2.15.13
|
||||
|
||||
*2023-02-12*
|
||||
|
||||
#### Bug fixes
|
||||
- Docs
|
||||
- Fix Statistic docs (#22383 by @JUST-Limbo)
|
||||
- Fix Input docs (#22093 by @lm312)
|
||||
- Fix en-US docs (#22268 #22269 #22270 by @Hazel-Lin)
|
||||
- Fix Pagination docs (#22288 by @xujintai123)
|
||||
- Fix: Links docs (#22370 by @itmier)
|
||||
- Statistics
|
||||
- fix slot display bug (#22375 by @webvs2)
|
||||
- Chore
|
||||
- missing web-type after publishing (#22271 by @loosheng)
|
||||
#### Optimization
|
||||
- InputNumber
|
||||
- Fix touch one click trigger twice on the window touch pad (#22185 by @mrsai)
|
||||
- Image
|
||||
- Add initialIndex prop (#22346 by @inkroom)
|
||||
- Statistics
|
||||
- Updated countdown feature to localize lodash Closes (#22260 by @webvs2)
|
||||
- Update code and doc (#22276 by @webvs2)
|
||||
- Other
|
||||
- fix web-types type props (#22281 by @whzxc)
|
||||
|
||||
### 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
|
||||
|
||||
*2022-06-02*
|
||||
|
|
@ -18,7 +102,7 @@
|
|||
- Fix Calendar docs (#21814 by @GoJam11)
|
||||
- Fix TimePicker docs (#21803 by @Alanscut)
|
||||
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
||||
- 其他
|
||||
- Other
|
||||
- Fix codepen display bug (#21863 by @bofeng)
|
||||
|
||||
#### Optimization
|
||||
|
|
|
|||
|
|
@ -1,5 +1,89 @@
|
|||
## 更新日志
|
||||
|
||||
### 2.15.13
|
||||
|
||||
*2023-02-12*
|
||||
|
||||
#### Bug 修复
|
||||
- Docs
|
||||
- 修复 Statistic 文案 (#22383 by @JUST-Limbo)
|
||||
- 修复 Input 文案 (#22093 by @lm312)
|
||||
- 修复 en-US 文案 (#22268 #22269 #22270 by @Hazel-Lin)
|
||||
- 修复 Pagination 文案 (#22288 by @xujintai123)
|
||||
- 修复 Links 文案 (#22370 by @itmier)
|
||||
- Statistics
|
||||
- 修复 slot 显示问题 (#22375 by @webvs2)
|
||||
- Chore
|
||||
- 修复 web-type 文件丢失问题 (#22271 by @loosheng)
|
||||
#### 优化
|
||||
- InputNumber
|
||||
- windows触摸屏响应优化 (#22185 by @mrsai)
|
||||
- Image
|
||||
- 新增 initialIndex 属性 (#22346 by @inkroom)
|
||||
- Statistics
|
||||
- countdown 特性更新 (#22260 by @webvs2)
|
||||
- 代码优化及doc更新 (#22276 by @webvs2)
|
||||
- 其他
|
||||
- web-type代码优化 (#22281 by @whzxc)
|
||||
|
||||
### 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
|
||||
|
||||
*2022-06-02*
|
||||
|
|
|
|||
|
|
@ -40,12 +40,12 @@
|
|||
|
||||
Element will stay with Vue 2.x
|
||||
|
||||
For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus) from the same team (Element Plus is a community develop project)
|
||||
For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus)(Element Plus is a community develop project)
|
||||
|
||||
## Links
|
||||
- Homepage and documentation
|
||||
- [International users](http://element.eleme.io/#/en-US)
|
||||
- [Chinese users](http://element-cn.eleme.io/#/zh-CN)
|
||||
- [Chinese users](http://element.eleme.io/#/zh-CN)
|
||||
- [Spanish users](http://element.eleme.io/#/es)
|
||||
- [French users](http://element.eleme.io/#/fr-FR)
|
||||
- [awesome-element](https://github.com/ElementUI/awesome-element)
|
||||
|
|
|
|||
|
|
@ -46,4 +46,4 @@ exports.vue = {
|
|||
amd: 'vue'
|
||||
};
|
||||
|
||||
exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date\.js/;
|
||||
exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date\.js|utils\/lodash\.js/;
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@
|
|||
"cascader-panel": "./packages/cascader-panel/index.js",
|
||||
"avatar": "./packages/avatar/index.js",
|
||||
"drawer": "./packages/drawer/index.js",
|
||||
"statistic": "./packages/statistic/index.js",
|
||||
"popconfirm": "./packages/popconfirm/index.js",
|
||||
"skeleton": "./packages/skeleton/index.js",
|
||||
"skeleton-item": "./packages/skeleton-item/index.js",
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ Display date.
|
|||
|-----------------|------------------- |---------- |---------------------- |--------- |
|
||||
| value / v-model | binding value | Date/string/number | — | — |
|
||||
| range | time range, including start time and end time. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | Array | — | — |
|
||||
| first-day-of-week | fisrt day of week| Number | 1 to 7 | 1 |
|
||||
| first-day-of-week | first day of week| Number | 1 to 7 | 1 |
|
||||
|
||||
### dateCell Scoped Slot Parameters
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
|
|||
|
|
@ -112,6 +112,24 @@ You can choose week, month, year or multiple dates by extending the standard dat
|
|||
</el-date-picker>
|
||||
</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>
|
||||
export default {
|
||||
|
|
@ -120,7 +138,9 @@ You can choose week, month, year or multiple dates by extending the standard dat
|
|||
value1: '',
|
||||
value2: '',
|
||||
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 | — | — |
|
||||
| start-placeholder | placeholder for the start 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 |
|
||||
| align | alignment | left/center/right | left |
|
||||
| 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 |
|
||||
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
|
||||
| validate-event | whether to trigger form validation | boolean | - | true |
|
||||
| append-to-body | whether to append DatePicker itself to body | boolean | — | true |
|
||||
|
||||
### Picker Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
| default-time | the default time value after picking a date | non-range: string / range: string[] | non-range: a string like `12:00:00`, range: array of two strings, and the first item is for the start date and second for the end date. `00:00:00` will be used if not specified | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](#/en-US/component/date-picker#date-formats) | — |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
|
||||
| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
|
||||
| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
|
||||
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
|
||||
|
||||
|
|
|
|||
|
|
@ -520,7 +520,7 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
|
|||
|
||||
All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute.
|
||||
|
||||
:::demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
|
||||
:::demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormItem.
|
||||
```html
|
||||
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
|
||||
<el-form-item label="Activity name">
|
||||
|
|
|
|||
|
|
@ -147,6 +147,7 @@ Besides the native features of img, support lazy load, custom placeholder and lo
|
|||
| scroll-container | The container to add scroll listener when using lazy load | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |
|
||||
| preview-src-list | allow big image preview | Array | — | - |
|
||||
| z-index | set image preview z-index | Number | — | 2000 |
|
||||
| initial-index | set image preview array index | Number | — | - |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
|
|||
| offset | popover offset | number | — | 0 |
|
||||
| transition | popover transition animation | string | — | el-fade-in-linear |
|
||||
| visible-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
|
||||
| popper-options | parameters for [popper.js](https://popper.js.org/documentation.html) | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-options | parameters for [popper.js](https://popper.js.org/docs/v2/) | object | please refer to [popper.js](https://popper.js.org/docs/v2/) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | custom class name for popover | string | — | — |
|
||||
| open-delay | delay before appearing when `trigger` is hover, in milliseconds | number | — | — |
|
||||
| close-delay | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
|
||||
| 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 | — | — |
|
||||
|
|
@ -304,7 +304,7 @@ Sometimes API responds very quickly, when that happens, the skeleton just gets r
|
|||
### Skeleton Item Attributes
|
||||
| Attribute | Description | Type | Acceptable Value | Default |
|
||||
| ------- | ---------------- | ------- | ------------ | ------ |
|
||||
| variant | The current rendering skeleton type | Enum(string) | p / text / h1 / h3 / text / caption / button / image / circle / rect | text |
|
||||
| variant | The current rendering skeleton type | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text |
|
||||
|
||||
|
||||
### Skeleton Slots
|
||||
|
|
|
|||
|
|
@ -0,0 +1,204 @@
|
|||
## 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',
|
||||
};
|
||||
},
|
||||
};
|
||||
</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 {
|
||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||
deadline3: Date.now() + 1000 * 60 * 30,
|
||||
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||
stop: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
hilarity() {
|
||||
this.$notify({
|
||||
title: 'Prompt',
|
||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||
duration: 0,
|
||||
});
|
||||
},
|
||||
clickFn() {
|
||||
this.$refs.statistic.suspend(this.stop);
|
||||
this.stop = !this.stop;
|
||||
},
|
||||
add() {
|
||||
this.deadline3 = this.deadline3 + 1000 * 10;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 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>
|
||||
</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>
|
||||
export default {
|
||||
|
|
@ -122,7 +140,9 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
|
|||
value1: '',
|
||||
value2: '',
|
||||
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 | — | — |
|
||||
| start-placeholder | placeholder para la fecha de inicio 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 |
|
||||
| align | alineación | left/center/right | left | |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| append-to-body | Si adjuntar el cuadro de DatePicker al cuerpo | boolean | — | true |
|
||||
|
||||
### Opciones del Picker
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
|
|
|
|||
|
|
@ -149,6 +149,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
|
|||
| scroll-container | El contenedor para añadir el scroll listener cuando se utiliza lazy load | string / HTMLElement | — | El contenedor padre más cercano cuya propiedad de desbordamiento es auto o scroll |
|
||||
| preview-src-list | permitir una vista previa grande de la imagen | Array | — | - |
|
||||
| z-index | establecer el z-index de la vista previa de la imagen | Number | — | 2000 |
|
||||
| initial-index | set image preview array index | Number | — | - |
|
||||
|
||||
### Eventos
|
||||
| Nombre del evento | Descripción | Parámetros |
|
||||
|
|
|
|||
|
|
@ -617,7 +617,6 @@ export default {
|
|||
| ------ | ------------------------------------------------------------ | ------------------------- |
|
||||
| blur | Se dispara cuando se pierde el foco | (event: Event) |
|
||||
| focus | Se dispara cuando se obtiene el foco | (event: Event) |
|
||||
| change | se activa cuando cambia el valor de entrada | (value: string \| number) |
|
||||
| change | se activa solo cuando el cuadro de entrada pierde el foco o el usuario presiona Enter | (value: string \| number) |
|
||||
| input | se activa cuando cambia el valor de entrada | (value: string \| number) |
|
||||
| clear | se dispara cuando la entrada es borrada por el botón generado por el atributo `clearable`. | — |
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
|
|||
| offset | popover offset | number | — | 0 |
|
||||
| transition | animación de transición del popover | string | — | el-fade-in-linear |
|
||||
| visible-arrow | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
|
||||
| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-options | parámetros para [popper.js](https://popper.js.org/docs/v2/) | object | por favor, refiérase a [popper.js](https://popper.js.org/docs/v2/) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | clase propia para popover | string | — | — |
|
||||
| open-delay | retraso de la aparición cuando `trigger` es hover, en mili segundos | number | — | — |
|
||||
| close-delay | Retraso antes de desaparecer cuando el `trigger` es hover, en mili segundos. | number | — | 200 |
|
||||
|
|
|
|||
|
|
@ -170,3 +170,5 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
|
|||
| show-text | mostrar porcentaje | boolean | — | true |
|
||||
| stroke-linecap | circle/dashboard tipo de diseño al final del camino | string | butt/round/square | round |
|
||||
| format | personalizar el formato de texto estableciendo format | function(percentage) | — | — |
|
||||
| define-back-color | background color of progress bar (hex format) | string | — | — |
|
||||
| text-color | text color of progress bar (hex format) | string | — | — |
|
||||
|
|
@ -304,7 +304,7 @@ Sometimes API responds very quickly, when that happens, the skeleton just gets r
|
|||
### Skeleton Item Attributes
|
||||
| Attribute | Description | Type | Acceptable Value | Default |
|
||||
| ------- | ---------------- | ------- | ------------ | ------ |
|
||||
| variant | The current rendering skeleton type | Enum(string) | p / text / h1 / h3 / text / caption / button / image / circle / rect | text |
|
||||
| variant | The current rendering skeleton type | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text |
|
||||
|
||||
|
||||
### Skeleton Slots
|
||||
|
|
|
|||
|
|
@ -0,0 +1,203 @@
|
|||
## 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',
|
||||
};
|
||||
},
|
||||
};
|
||||
</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 {
|
||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||
deadline3: Date.now() + 1000 * 60 * 30,
|
||||
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||
stop: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
hilarity() {
|
||||
this.$notify({
|
||||
title: 'Prompt',
|
||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||
duration: 0,
|
||||
});
|
||||
},
|
||||
clickFn() {
|
||||
this.$refs.statistic.suspend(this.stop);
|
||||
this.stop = !this.stop;
|
||||
},
|
||||
add() {
|
||||
this.deadline3 = this.deadline3 + 1000 * 10;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 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 |
|
||||
| clear-icon | Icône de reset. | string | — | el-icon-circle-close |
|
||||
| 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
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|
|
|
|||
|
|
@ -148,6 +148,7 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
|
|||
| scroll-container | Le conteneur auquel ajouter le listener du scroll en mode lazy loading. | string / HTMLElement | — | Le conteneur parent le plus proche avec la propriété overflow à auto ou scroll. |
|
||||
| preview-src-list | allow big image preview | Array | — | - |
|
||||
| z-index | set image preview z-index | Number | — | 2000 |
|
||||
| initial-index | set image preview array index | Number | — | - |
|
||||
|
||||
### Évènements
|
||||
| Nom | Description | Paramètres |
|
||||
|
|
|
|||
|
|
@ -603,7 +603,6 @@ export default {
|
|||
|----| ----| ----|
|
||||
| blur | Se déclenche quand Input perds le focus. | (event: Event) |
|
||||
| focus | Se déclenche quand Input a le focus. | (event: Event) |
|
||||
| change | Se déclenche quand la valeur change. | (value: string \ number) |
|
||||
| change | Déclenché uniquement lorsque la zone de saisie perd le focus ou que l'utilisateur appuie sur Entrée. | (value: string \| number) |
|
||||
| input | Déclenché lorsque la valeur d'entrée change. | (value: string \| number) |
|
||||
| clear | Se déclenche quand le champ est effacé par le bouton de reset. | — |
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
|
|||
| offset | Décalage du popover. | number | — | 0 |
|
||||
| transition | Animation de transition du popover. | string | — | el-fade-in-linear |
|
||||
| visible-arrow | Si une flèche doit être affichée ou non. Pour plus d'informations, référez-vous à [Vue-popper](https://github.com/element-component/vue-popper). | boolean | — | true |
|
||||
| popper-options | Paramètres pour [popper.js](https://popper.js.org/documentation.html). | object | Référez-vous à [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-options | Paramètres pour [popper.js](https://popper.js.org/docs/v2/). | object | Référez-vous à [popper.js](https://popper.js.org/docs/v2/). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | Classe du popover. | string | — | — |
|
||||
| open-delay | Délai d'affichage, lorsque `trigger` est 'hover', en millisecondes. | number | — | — |
|
||||
| close-delay | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
| 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) | — | — |
|
||||
| define-back-color | background color of progress bar (hex format) | string | — | — |
|
||||
| text-color | text color of progress bar (hex format) | string | — | — |
|
||||
|
|
@ -304,7 +304,7 @@ Sometimes API responds very quickly, when that happens, the skeleton just gets r
|
|||
### Skeleton Item Attributes
|
||||
| Attribute | Description | Type | Acceptable Value | Default |
|
||||
| ------- | ---------------- | ------- | ------------ | ------ |
|
||||
| variant | The current rendering skeleton type | Enum(string) | p / text / h1 / h3 / text / caption / button / image / circle / rect | text |
|
||||
| variant | The current rendering skeleton type | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text |
|
||||
|
||||
|
||||
### Skeleton Slots
|
||||
|
|
|
|||
|
|
@ -0,0 +1,204 @@
|
|||
## 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',
|
||||
};
|
||||
},
|
||||
};
|
||||
</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 {
|
||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||
deadline3: Date.now() + 1000 * 60 * 30,
|
||||
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||
stop: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
hilarity() {
|
||||
this.$notify({
|
||||
title: 'Prompt',
|
||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||
duration: 0,
|
||||
});
|
||||
},
|
||||
clickFn() {
|
||||
this.$refs.statistic.suspend(this.stop);
|
||||
this.stop = !this.stop;
|
||||
},
|
||||
add() {
|
||||
this.deadline3 = this.deadline3 + 1000 * 10;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 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>
|
||||
</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>
|
||||
export default {
|
||||
|
|
@ -119,7 +137,9 @@
|
|||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: ''
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -395,7 +415,7 @@
|
|||
| placeholder | 非范围选择时的占位内容 | string | — | — |
|
||||
| start-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 |
|
||||
| align | 对齐方式 | string | left, center, right | left |
|
||||
| popper-class | DatePicker 下拉框的类名 | string | — | — |
|
||||
|
|
@ -409,6 +429,7 @@
|
|||
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
|
||||
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
|
||||
| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
|
||||
| append-to-body | DetePicker 自身是否插入至 body 元素上。 | boolean | — | true |
|
||||
|
||||
### Picker Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -147,6 +147,7 @@
|
|||
| scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
|
||||
| preview-src-list | 开启图片预览功能 | Array | — | - |
|
||||
| z-index | 设置图片预览的 z-index | Number | — | 2000 |
|
||||
| initial-index | 图片预览初始图片index | Number | — | - |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
### 基础用法
|
||||
|
||||
:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为下一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示总条目数，`size`用于设置每页显示的页码数量。
|
||||
:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为下一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`sizes`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示总条目数，`sizes`用于设置每页显示的页码数量。
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">页数较少时的效果</span>
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
| offset | 出现位置的偏移量 | Number | — | 0 |
|
||||
| transition | 定义渐变动画 | String | — | fade-in-linear |
|
||||
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
|
||||
| popper-options | [popper.js](https://popper.js.org/) 的参数 | Object | 参考 [popper.js](https://popper.js.org/) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-options | [popper.js](https://popper.js.org/docs/v2/) 的参数 | Object | 参考 [popper.js](https://popper.js.org/docs/v2/) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | 为 popper 添加类名 | String | — | — |
|
||||
| open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | — |
|
||||
| close-delay | 触发方式为 hover 时的隐藏延迟，单位为毫秒 | number | — | 200 |
|
||||
|
|
|
|||
|
|
@ -176,3 +176,5 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
|
|||
| show-text | 是否显示进度条文字内容 | boolean | — | true |
|
||||
| stroke-linecap | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
|
||||
| format | 指定进度条文字内容 | function(percentage) | — | — |
|
||||
| define-back-color | 指定进度条底色（支持 hex 格式） | string | — | — |
|
||||
| text-color | 指定进度条字体颜色（支持 hex 格式） | string | — | — |
|
||||
|
|
|
|||
|
|
@ -187,7 +187,7 @@
|
|||
### Radio Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||
| input | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||
|
||||
### Radio-group Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
### Radio-group Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||
| input | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||
|
||||
### Radio-button Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,201 @@
|
|||
## 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: '今年的增长',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.like {
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 倒计时
|
||||
|
||||
:::warning
|
||||
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
|
||||
:::
|
||||
:::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 {
|
||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||
deadline3: Date.now() + 1000 * 60 * 30,
|
||||
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||
stop: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
hilarity() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '时间已到，你可知寸金难买寸光阴？',
|
||||
duration: 0,
|
||||
});
|
||||
},
|
||||
clickFn() {
|
||||
this.$refs.statistic.suspend(this.stop);
|
||||
this.stop = !this.stop;
|
||||
},
|
||||
add() {
|
||||
this.deadline3 = this.deadline3 + 1000 * 10;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 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 | 设置数值的样式 | object | — | — |
|
||||
| rate | 设置倍率 | number | — | 1000 |
|
||||
|
||||
### Statistic Slots
|
||||
|
||||
| name | 说明 |
|
||||
| --------- | ---------- |
|
||||
| prefix | 数值的前缀 |
|
||||
| suffix | 数值的后缀 |
|
||||
| formatter | 数值内容 |
|
||||
| title | 数值的标题 |
|
||||
|
||||
### Statistic.Countdown Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | ------------------ | ------- | ----------- | ---------- |
|
||||
| time-indices | 是否开启倒计时功能 | boolean | true\|false | false |
|
||||
| value | 必填值，输入绑定值 | string | — | — |
|
||||
| format | 格式化倒计时展示 | string | — | 'HH:mm:ss' |
|
||||
|
||||
### Statistic.Countdown Events
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| -------- | ---------------------- | ---------------- |
|
||||
| change | 在`倒计时`的功能中开启 | (value: Date) |
|
||||
| finish | 在`倒计时` 完成后启动 | (value: boolean) |
|
||||
|
||||
### Statistic Methods
|
||||
|
||||
| 方法名 | 说明 | 参数 | 回调参数 |
|
||||
| ------- | ---------- | --------------- | ------------- |
|
||||
| suspend | 暂停倒计时 | (value:boolean) | (value: Date) |
|
||||
|
|
@ -192,6 +192,10 @@
|
|||
{
|
||||
"path": "/result",
|
||||
"title": "Result 结果"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic 统计数值"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -621,6 +625,10 @@
|
|||
{
|
||||
"path": "/drawer",
|
||||
"title": "Drawer"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -935,6 +943,10 @@
|
|||
{
|
||||
"path": "/drawer",
|
||||
"title": "Drawer"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1249,6 +1261,10 @@
|
|||
{
|
||||
"path": "/drawer",
|
||||
"title": "Drawer"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.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.13":"2.15"}
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
{
|
||||
"name": "element-ui",
|
||||
"version": "2.15.9",
|
||||
"version": "2.15.13",
|
||||
"description": "A Component Library for Vue.js.",
|
||||
"main": "lib/element-ui.common.js",
|
||||
"files": [
|
||||
"lib",
|
||||
"src",
|
||||
"packages",
|
||||
"types"
|
||||
"types",
|
||||
"web-types.json"
|
||||
],
|
||||
"typings": "types/index.d.ts",
|
||||
"scripts": {
|
||||
|
|
@ -59,6 +60,7 @@
|
|||
},
|
||||
"unpkg": "lib/index.js",
|
||||
"style": "lib/theme-chalk/index.css",
|
||||
"web-types": "./web-types.json",
|
||||
"dependencies": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -37,6 +37,14 @@
|
|||
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 {
|
||||
props: {
|
||||
disabledDate: {},
|
||||
|
|
@ -205,6 +213,13 @@
|
|||
}
|
||||
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 {
|
||||
this.$emit('pick', month);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,8 @@
|
|||
return val === null || (val instanceof Date && isDate(val));
|
||||
}
|
||||
},
|
||||
date: {}
|
||||
date: {},
|
||||
selectionMode: {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
@ -93,7 +94,16 @@
|
|||
if (target.tagName === 'A') {
|
||||
if (hasClass(target.parentNode, 'disabled')) return;
|
||||
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
|
||||
v-show="currentView === 'year'"
|
||||
@pick="handleYearPick"
|
||||
:selection-mode="selectionMode"
|
||||
:value="value"
|
||||
:default-value="defaultValue ? new Date(defaultValue) : null"
|
||||
:date="date"
|
||||
|
|
@ -110,6 +111,7 @@
|
|||
<month-table
|
||||
v-show="currentView === 'month'"
|
||||
@pick="handleMonthPick"
|
||||
:selection-mode="selectionMode"
|
||||
:value="value"
|
||||
:default-value="defaultValue ? new Date(defaultValue) : null"
|
||||
:date="date"
|
||||
|
|
@ -121,13 +123,13 @@
|
|||
|
||||
<div
|
||||
class="el-picker-panel__footer"
|
||||
v-show="footerVisible && currentView === 'date'">
|
||||
v-show="footerVisible && (currentView === 'date' || currentView === 'month' || currentView === 'year')">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
class="el-picker-panel__link-btn"
|
||||
@click="changeToNow"
|
||||
v-show="selectionMode !== 'dates'">
|
||||
v-show="selectionMode !== 'dates' && selectionMode !== 'months' && selectionMode !== 'years'">
|
||||
{{ t('el.datepicker.now') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
|
|
@ -190,6 +192,8 @@
|
|||
|
||||
value(val) {
|
||||
if (this.selectionMode === 'dates' && this.value) return;
|
||||
if (this.selectionMode === 'months' && this.value) return;
|
||||
if (this.selectionMode === 'years' && this.value) return;
|
||||
if (isDate(val)) {
|
||||
this.date = new Date(val);
|
||||
} else {
|
||||
|
|
@ -215,6 +219,10 @@
|
|||
}
|
||||
} else if (newVal === 'dates') {
|
||||
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') {
|
||||
this.date = modifyDate(this.date, this.year, month, 1);
|
||||
this.emit(this.date);
|
||||
} else if (this.selectionMode === 'months') {
|
||||
this.emit(month, true);
|
||||
} else {
|
||||
this.date = changeYearMonthAndClampDate(this.date, this.year, month);
|
||||
// TODO: should emit intermediate value ??
|
||||
|
|
@ -358,6 +368,8 @@
|
|||
if (this.selectionMode === 'year') {
|
||||
this.date = modifyDate(this.date, year, 0, 1);
|
||||
this.emit(this.date);
|
||||
} else if (this.selectionMode === 'years') {
|
||||
this.emit(year, true);
|
||||
} else {
|
||||
this.date = changeYearMonthAndClampDate(this.date, year, this.month);
|
||||
// TODO: should emit intermediate value ??
|
||||
|
|
@ -376,7 +388,7 @@
|
|||
},
|
||||
|
||||
confirm() {
|
||||
if (this.selectionMode === 'dates') {
|
||||
if (this.selectionMode === 'dates' || this.selectionMode === 'months' || this.selectionMode === 'years') {
|
||||
this.emit(this.value);
|
||||
} else {
|
||||
// value were emitted in handle{Date,Time}Pick, nothing to update here
|
||||
|
|
@ -390,9 +402,9 @@
|
|||
},
|
||||
|
||||
resetView() {
|
||||
if (this.selectionMode === 'month') {
|
||||
if (this.selectionMode === 'month' || this.selectionMode === 'months') {
|
||||
this.currentView = 'month';
|
||||
} else if (this.selectionMode === 'year') {
|
||||
} else if (this.selectionMode === 'year' || this.selectionMode === 'years') {
|
||||
this.currentView = 'year';
|
||||
} else {
|
||||
this.currentView = 'date';
|
||||
|
|
@ -546,7 +558,7 @@
|
|||
},
|
||||
|
||||
footerVisible() {
|
||||
return this.showTime || this.selectionMode === 'dates';
|
||||
return this.showTime || this.selectionMode === 'dates' || this.selectionMode === 'months' || this.selectionMode === 'years';
|
||||
},
|
||||
|
||||
visibleTime() {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<el-input
|
||||
class="el-date-editor"
|
||||
: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"
|
||||
:size="pickerSize"
|
||||
:name="name"
|
||||
|
|
@ -98,7 +98,6 @@ const NewPopper = {
|
|||
offset: Popper.props.offset,
|
||||
boundariesPadding: Popper.props.boundariesPadding,
|
||||
arrowOffset: Popper.props.arrowOffset,
|
||||
placement: Popper.props.placement,
|
||||
transformOrigin: Popper.props.transformOrigin
|
||||
},
|
||||
methods: Popper.methods,
|
||||
|
|
@ -111,6 +110,7 @@ const NewPopper = {
|
|||
const DEFAULT_FORMATS = {
|
||||
date: 'yyyy-MM-dd',
|
||||
month: 'yyyy-MM',
|
||||
months: 'yyyy-MM',
|
||||
datetime: 'yyyy-MM-dd HH:mm:ss',
|
||||
time: 'HH:mm:ss',
|
||||
week: 'yyyywWW',
|
||||
|
|
@ -118,7 +118,8 @@ const DEFAULT_FORMATS = {
|
|||
daterange: 'yyyy-MM-dd',
|
||||
monthrange: 'yyyy-MM',
|
||||
datetimerange: 'yyyy-MM-dd HH:mm:ss',
|
||||
year: 'yyyy'
|
||||
year: 'yyyy',
|
||||
years: 'yyyy'
|
||||
};
|
||||
const HAVE_TRIGGER_TYPES = [
|
||||
'date',
|
||||
|
|
@ -132,7 +133,9 @@ const HAVE_TRIGGER_TYPES = [
|
|||
'monthrange',
|
||||
'timerange',
|
||||
'datetimerange',
|
||||
'dates'
|
||||
'dates',
|
||||
'months',
|
||||
'years'
|
||||
];
|
||||
const DATE_FORMATTER = function(value, format) {
|
||||
if (format === 'timestamp') return value.getTime();
|
||||
|
|
@ -256,6 +259,24 @@ const TYPE_VALUE_RESOLVER_MAP = {
|
|||
return (typeof value === 'string' ? value.split(', ') : value)
|
||||
.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 = {
|
||||
|
|
@ -491,6 +512,10 @@ export default {
|
|||
return 'year';
|
||||
} else if (this.type === 'dates') {
|
||||
return 'dates';
|
||||
} else if (this.type === 'months') {
|
||||
return 'months';
|
||||
} else if (this.type === 'years') {
|
||||
return 'years';
|
||||
}
|
||||
|
||||
return 'day';
|
||||
|
|
@ -513,7 +538,7 @@ export default {
|
|||
} else if (this.userInput !== null) {
|
||||
return this.userInput;
|
||||
} else if (formattedValue) {
|
||||
return this.type === 'dates'
|
||||
return (this.type === 'dates' || this.type === 'years' || this.type === 'months')
|
||||
? formattedValue.join(', ')
|
||||
: formattedValue;
|
||||
} else {
|
||||
|
|
@ -715,7 +740,7 @@ export default {
|
|||
if (!this.pickerVisible) return;
|
||||
this.pickerVisible = false;
|
||||
|
||||
if (this.type === 'dates') {
|
||||
if (this.type === 'dates' || this.type === 'years' || this.type === 'months') {
|
||||
// restore to former value
|
||||
const oldValue = parseAsFormatAndType(this.valueOnOpen, this.valueFormat, this.type, this.rangeSeparator) || this.valueOnOpen;
|
||||
this.emitInput(oldValue);
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@
|
|||
:key="url"
|
||||
:src="currentImg"
|
||||
:style="imgStyle"
|
||||
referrerpolicy='no-referrer'
|
||||
@load="handleImgLoad"
|
||||
@error="handleImgError"
|
||||
@mousedown="handleMouseDown">
|
||||
|
|
|
|||
|
|
@ -62,7 +62,8 @@
|
|||
zIndex: {
|
||||
type: Number,
|
||||
default: 2000
|
||||
}
|
||||
},
|
||||
initialIndex: Number
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -95,9 +96,15 @@
|
|||
},
|
||||
imageIndex() {
|
||||
let previewIndex = 0;
|
||||
const initialIndex = this.initialIndex;
|
||||
if (initialIndex >= 0) {
|
||||
previewIndex = initialIndex;
|
||||
return previewIndex;
|
||||
}
|
||||
const srcIndex = this.previewSrcList.indexOf(this.src);
|
||||
if (srcIndex >= 0) {
|
||||
previewIndex = srcIndex;
|
||||
return previewIndex;
|
||||
}
|
||||
return previewIndex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ loadingDirective.install = Vue => {
|
|||
el.mask.style[property] = el.maskStyle[property];
|
||||
});
|
||||
|
||||
if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed') {
|
||||
if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed' && el.originalPosition !== 'sticky') {
|
||||
addClass(parent, 'el-loading-parent--relative');
|
||||
}
|
||||
if (binding.modifiers.fullscreen && binding.modifiers.lock) {
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ const Loading = (options = {}) => {
|
|||
});
|
||||
|
||||
addStyle(options, parent, instance);
|
||||
if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed') {
|
||||
if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed' && instance.originalPosition !== 'sticky') {
|
||||
addClass(parent, 'el-loading-parent--relative');
|
||||
}
|
||||
if (options.fullscreen && options.lock) {
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
aria-valuemax="100"
|
||||
>
|
||||
<div class="el-progress-bar" v-if="type === 'line'">
|
||||
<div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
|
||||
<div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px', backgroundColor:defineBackColor}">
|
||||
<div class="el-progress-bar__inner" :style="barStyle">
|
||||
<div class="el-progress-bar__innerText" v-if="showText && textInside">{{content}}</div>
|
||||
<div class="el-progress-bar__innerText" :style="{color:textColor}" v-if="showText && textInside">{{content}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<path
|
||||
class="el-progress-circle__track"
|
||||
:d="trackPath"
|
||||
stroke="#e5e9f2"
|
||||
:stroke="defineBackColor"
|
||||
:stroke-width="relativeStrokeWidth"
|
||||
fill="none"
|
||||
:style="trailPathStyle"></path>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<div
|
||||
class="el-progress__text"
|
||||
v-if="showText && !textInside"
|
||||
:style="{fontSize: progressTextSize + 'px'}"
|
||||
:style="{fontSize: progressTextSize + 'px', color:textColor}"
|
||||
>
|
||||
<template v-if="!status">{{content}}</template>
|
||||
<i v-else :class="iconClass"></i>
|
||||
|
|
@ -93,6 +93,14 @@
|
|||
type: [String, Array, Function],
|
||||
default: ''
|
||||
},
|
||||
defineBackColor: {
|
||||
type: [String, Array, Function],
|
||||
default: '#ebeef5'
|
||||
},
|
||||
textColor: {
|
||||
type: [String, Array, Function],
|
||||
default: '#606266'
|
||||
},
|
||||
format: Function
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import Statistic from './src/main';
|
||||
|
||||
/* istanbul ignore next */
|
||||
Statistic.install = function(Vue) {
|
||||
Vue.component(Statistic.name, Statistic);
|
||||
};
|
||||
|
||||
export default Statistic;
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<div class="el-statistic">
|
||||
<div class="head" v-if="title||$slots.title">
|
||||
<slot name="title">
|
||||
<span class="title">
|
||||
{{ title }}
|
||||
</span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="con">
|
||||
<span class="prefix" v-if="prefix||$slots.prefix">
|
||||
<slot name="prefix" >
|
||||
{{ prefix }}
|
||||
</slot>
|
||||
</span>
|
||||
<span class="number" :style="valueStyle">
|
||||
<slot name="formatter"> {{ disposeValue }}</slot>
|
||||
</span>
|
||||
<span class="suffix" v-if="suffix||$slots.suffix">
|
||||
<slot name="suffix">
|
||||
{{ suffix }}
|
||||
</slot>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isNumber, 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: null
|
||||
},
|
||||
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;
|
||||
let [integer, decimal] = String(value).split('.');
|
||||
if (precision) {
|
||||
decimal = `${decimal || ''}${(1)
|
||||
.toFixed(precision)
|
||||
.replace('.', '')
|
||||
.slice(1)}`;
|
||||
decimal = decimal.slice(0, precision);
|
||||
}
|
||||
let result = 0;
|
||||
// 1000 multiplying power
|
||||
if (groupSeparator) {
|
||||
integer = this.magnification(integer, rate, groupSeparator);
|
||||
}
|
||||
|
||||
result = [integer, decimal].join(
|
||||
decimal ? 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 diffTiem = diffDate(than.value, Date.now());
|
||||
than.disposeValue = formatTimeStr(diffTiem);
|
||||
stopTime(diffTiem);
|
||||
}, REFRESH_INTERVAL);
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
suspend(true);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "element-theme-chalk",
|
||||
"version": "2.15.9",
|
||||
"version": "2.15.13",
|
||||
"description": "Element component chalk theme.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@
|
|||
@import "./cascader-panel.scss";
|
||||
@import "./avatar.scss";
|
||||
@import "./drawer.scss";
|
||||
@import "./statistic.scss";
|
||||
@import "./popconfirm.scss";
|
||||
@import "./skeleton.scss";
|
||||
@import "./skeleton-item.scss";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(statistic) {
|
||||
$statistic-justify: center;
|
||||
$statistic-align: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $--color-black;
|
||||
font-variant: tabular-nums;
|
||||
list-style: none;
|
||||
font-feature-settings: "tnum";
|
||||
text-align: center;
|
||||
.head {
|
||||
margin-bottom: 4px;
|
||||
color: $--color-text-regular;
|
||||
font-size: $--font-size-small;
|
||||
}
|
||||
|
||||
.con {
|
||||
font-family: Sans-serif;
|
||||
display: flex;
|
||||
justify-content: $statistic-justify;
|
||||
align-items: $statistic-align;
|
||||
color: $--color-text-primary;
|
||||
.number {
|
||||
font-size: $--font-size-extra-large;
|
||||
padding: 0 4px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@ export const getChildState = 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);
|
||||
if (all) {
|
||||
|
|
@ -463,12 +463,11 @@ export default class Node {
|
|||
this.loading = true;
|
||||
|
||||
const resolve = (children) => {
|
||||
this.loaded = true;
|
||||
this.loading = false;
|
||||
this.childNodes = [];
|
||||
|
||||
this.doCreateChildren(children, defaultProps);
|
||||
|
||||
this.loaded = true;
|
||||
this.loading = false;
|
||||
this.updateLeafState();
|
||||
if (callback) {
|
||||
callback.call(this, children);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import { once, on } from 'element-ui/src/utils/dom';
|
||||
import { isMac } from 'element-ui/src/utils/util';
|
||||
|
||||
export default {
|
||||
bind(el, binding, vnode) {
|
||||
let interval = null;
|
||||
let startTime;
|
||||
const maxIntervals = isMac() ? 100 : 200;
|
||||
const handler = () => vnode.context[binding.expression].apply();
|
||||
const clear = () => {
|
||||
if (Date.now() - startTime < 100) {
|
||||
if (Date.now() - startTime < maxIntervals) {
|
||||
handler();
|
||||
}
|
||||
clearInterval(interval);
|
||||
|
|
@ -18,7 +20,7 @@ export default {
|
|||
startTime = Date.now();
|
||||
once(document, 'mouseup', clear);
|
||||
clearInterval(interval);
|
||||
interval = setInterval(handler, 100);
|
||||
interval = setInterval(handler, maxIntervals);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ import PageHeader from '../packages/page-header/index.js';
|
|||
import CascaderPanel from '../packages/cascader-panel/index.js';
|
||||
import Avatar from '../packages/avatar/index.js';
|
||||
import Drawer from '../packages/drawer/index.js';
|
||||
import Statistic from '../packages/statistic/index.js';
|
||||
import Popconfirm from '../packages/popconfirm/index.js';
|
||||
import Skeleton from '../packages/skeleton/index.js';
|
||||
import SkeletonItem from '../packages/skeleton-item/index.js';
|
||||
|
|
@ -168,6 +169,7 @@ const components = [
|
|||
CascaderPanel,
|
||||
Avatar,
|
||||
Drawer,
|
||||
Statistic,
|
||||
Popconfirm,
|
||||
Skeleton,
|
||||
SkeletonItem,
|
||||
|
|
@ -210,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
|||
}
|
||||
|
||||
export default {
|
||||
version: '2.15.9',
|
||||
version: '2.15.13',
|
||||
locale: locale.use,
|
||||
i18n: locale.i18n,
|
||||
install,
|
||||
|
|
@ -296,6 +298,7 @@ export default {
|
|||
CascaderPanel,
|
||||
Avatar,
|
||||
Drawer,
|
||||
Statistic,
|
||||
Popconfirm,
|
||||
Skeleton,
|
||||
SkeletonItem,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default {
|
|||
now: 'Ahora',
|
||||
today: 'Hoy',
|
||||
cancel: 'Cancelar',
|
||||
clear: 'Despejar',
|
||||
clear: 'Limpiar',
|
||||
confirm: 'Confirmar',
|
||||
selectDate: 'Seleccionar fecha',
|
||||
selectTime: 'Seleccionar hora',
|
||||
|
|
@ -91,7 +91,7 @@ export default {
|
|||
emptyText: 'Sin Datos',
|
||||
confirmFilter: 'Confirmar',
|
||||
resetFilter: 'Reiniciar',
|
||||
clearFilter: 'Despejar',
|
||||
clearFilter: 'Limpiar',
|
||||
sumText: 'Suma'
|
||||
},
|
||||
tree: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
export default {
|
||||
el: {
|
||||
colorpicker: {
|
||||
confirm: 'Sah',
|
||||
clear: 'Padam'
|
||||
},
|
||||
datepicker: {
|
||||
now: 'Sekarang',
|
||||
today: 'Hari ini',
|
||||
cancel: 'Batal',
|
||||
clear: 'Padam',
|
||||
confirm: 'Sah',
|
||||
selectDate: 'Pilih Tarikh',
|
||||
selectTime: 'Pilih Masa',
|
||||
startDate: 'Tarikh Mula',
|
||||
startTime: 'Masa Mula',
|
||||
endDate: 'Tarikh Tamat',
|
||||
endTime: 'Masa Tamat',
|
||||
prevYear: 'Tahun Lepas',
|
||||
nextYear: 'Tahun Depan',
|
||||
prevMonth: 'Bulan Lepas',
|
||||
nextMonth: 'Bulan Depan',
|
||||
year: 'Tahun',
|
||||
month1: 'Januari',
|
||||
month2: 'Febuari',
|
||||
month3: 'Mac',
|
||||
month4: 'April',
|
||||
month5: 'Mei',
|
||||
month6: 'Jun',
|
||||
month7: 'Julai',
|
||||
month8: 'Ogos',
|
||||
month9: 'September',
|
||||
month10: 'Oktober',
|
||||
month11: 'November',
|
||||
month12: 'Disember',
|
||||
weeks: {
|
||||
sun: 'Ahad',
|
||||
mon: 'Isnin',
|
||||
tue: 'Selasa',
|
||||
wed: 'Rabu',
|
||||
thu: 'Khamis',
|
||||
fri: 'Jumaat',
|
||||
sat: 'Sabtu'
|
||||
},
|
||||
months: {
|
||||
jan: 'Januari',
|
||||
feb: 'Febuari',
|
||||
mar: 'Mac',
|
||||
apr: 'April',
|
||||
may: 'Mei',
|
||||
jun: 'Jun',
|
||||
jul: 'Julai',
|
||||
aug: 'Ogos',
|
||||
sep: 'September',
|
||||
oct: 'Oktober',
|
||||
nov: 'November',
|
||||
dec: 'Disember'
|
||||
}
|
||||
},
|
||||
select: {
|
||||
loading: 'Sedang dimuat turun',
|
||||
noMatch: 'Tiada maklumat yang sepadan',
|
||||
noData: 'Tiada maklumat',
|
||||
placeholder: 'Sila pilih'
|
||||
},
|
||||
cascader: {
|
||||
noMatch: 'Tiada maklumat yang sepadan',
|
||||
loading: 'Sedang dimuat turun',
|
||||
placeholder: 'Sila pilih',
|
||||
noData: 'Tiada maklumat'
|
||||
},
|
||||
pagination: {
|
||||
goto: 'Seterusnya',
|
||||
pagesize: 'x/Halaman',
|
||||
total: 'Jumlah {total} ',
|
||||
pageClassifier: 'Halaman'
|
||||
},
|
||||
messagebox: {
|
||||
title: 'Tip',
|
||||
confirm: 'Sah',
|
||||
cancel: 'Batal',
|
||||
error: 'Data yang diisi tidak sah!'
|
||||
},
|
||||
upload: {
|
||||
deleteTip: 'Tekan "Padam" untuk memadam',
|
||||
delete: 'Padam',
|
||||
preview: 'Pratonton gambar',
|
||||
continue: 'Meneruskan muat naik'
|
||||
},
|
||||
table: {
|
||||
emptyText: 'Tiada maklumat',
|
||||
confirmFilter: 'Tapis',
|
||||
resetFilter: 'Set Semula',
|
||||
clearFilter: 'Semua',
|
||||
sumText: 'Jumlah'
|
||||
},
|
||||
tree: {
|
||||
emptyText: 'Tiada maklumat'
|
||||
},
|
||||
transfer: {
|
||||
noMatch: 'Tiada maklumat yang sepadan',
|
||||
noData: 'Tiada maklumat',
|
||||
titles: ['Senarai 1', 'Senarai 2'],
|
||||
filterPlaceholder: 'Masukkan kandungan carian',
|
||||
noCheckedFormat: 'Jumlah {total} item',
|
||||
hasCheckedFormat: 'Telah memilih {checked}/{total} item'
|
||||
},
|
||||
image: {
|
||||
error: 'Muat turun gagal'
|
||||
},
|
||||
pageHeader: {
|
||||
title: 'Kembali'
|
||||
},
|
||||
popconfirm: {
|
||||
confirmButtonText: 'Sah',
|
||||
cancelButtonText: 'Batal'
|
||||
},
|
||||
empty: {
|
||||
description: 'Tiada maklumat'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -16,10 +16,10 @@ export default {
|
|||
startTime: 'Start Tidspunkt',
|
||||
endDate: 'Sluttdato',
|
||||
endTime: 'Sluttidspunkt',
|
||||
prevYear: 'Previous Year', // to be translated
|
||||
nextYear: 'Next Year', // to be translated
|
||||
prevMonth: 'Previous Month', // to be translated
|
||||
nextMonth: 'Next Month', // to be translated
|
||||
prevYear: 'Forrige År',
|
||||
nextYear: 'Neste År',
|
||||
prevMonth: 'Forrige Måned',
|
||||
nextMonth: 'Neste Måned',
|
||||
year: '',
|
||||
month1: 'Januar',
|
||||
month2: 'Februar',
|
||||
|
|
@ -82,7 +82,7 @@ export default {
|
|||
error: 'Ugyldig input'
|
||||
},
|
||||
upload: {
|
||||
deleteTip: 'press delete to remove', // to be translated
|
||||
deleteTip: 'trykk slett for å ta bort',
|
||||
delete: 'Slett',
|
||||
preview: 'Forhåndsvisning',
|
||||
continue: 'Fortsett'
|
||||
|
|
@ -92,7 +92,7 @@ export default {
|
|||
confirmFilter: 'Bekreft',
|
||||
resetFilter: 'Tilbakestill',
|
||||
clearFilter: 'Alle',
|
||||
sumText: 'Sum' // to be translated
|
||||
sumText: 'Sum'
|
||||
},
|
||||
tree: {
|
||||
emptyText: 'Ingen Data'
|
||||
|
|
@ -100,20 +100,20 @@ export default {
|
|||
transfer: {
|
||||
noMatch: 'Ingen samsvarende data',
|
||||
noData: 'Ingen data',
|
||||
titles: ['List 1', 'List 2'], // to be translated
|
||||
filterPlaceholder: 'Enter keyword', // to be translated
|
||||
noCheckedFormat: '{total} items', // to be translated
|
||||
hasCheckedFormat: '{checked}/{total} checked' // to be translated
|
||||
titles: ['Liste 1', 'Liste 2'],
|
||||
filterPlaceholder: 'Tast inn nøkkelord',
|
||||
noCheckedFormat: '{total} gjenstander',
|
||||
hasCheckedFormat: '{checked}/{total} sjekket'
|
||||
},
|
||||
image: {
|
||||
error: 'FAILED' // to be translated
|
||||
error: 'MISLYKTES'
|
||||
},
|
||||
pageHeader: {
|
||||
title: 'Back' // to be translated
|
||||
title: 'Tilbake'
|
||||
},
|
||||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
confirmButtonText: 'Ja',
|
||||
cancelButtonText: 'Nei'
|
||||
},
|
||||
empty: {
|
||||
description: 'Ingen Data'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
export default {
|
||||
el: {
|
||||
colorpicker: {
|
||||
confirm: 'හරි',
|
||||
clear: 'හිස් කරන්න'
|
||||
},
|
||||
datepicker: {
|
||||
now: 'දැන්',
|
||||
today: 'අද',
|
||||
cancel: 'අවලංගු කරන්න',
|
||||
clear: 'හිස් කරන්න',
|
||||
confirm: 'හරි',
|
||||
selectDate: 'දිනය තෝරන්න',
|
||||
selectTime: 'වේලාව තෝරන්න',
|
||||
startDate: 'ආරම්භක දිනය',
|
||||
startTime: 'ආරම්භක වේලාව',
|
||||
endDate: 'අවසන් වන දිනය',
|
||||
endTime: 'අවසන් වන වේලාව',
|
||||
prevYear: 'කලින් අවුරුද්ද',
|
||||
nextYear: 'ඊළඟ අවුරුද්ද',
|
||||
prevMonth: 'කලින් මාසය',
|
||||
nextMonth: 'ඊළඟ මාසය',
|
||||
year: '',
|
||||
month1: 'දුරුතු',
|
||||
month2: 'නවම්',
|
||||
month3: 'මැදින්',
|
||||
month4: 'බක්',
|
||||
month5: 'වෙසක්',
|
||||
month6: 'පොසොන්',
|
||||
month7: 'ඇසළ',
|
||||
month8: 'නිකිණි',
|
||||
month9: 'බිනර',
|
||||
month10: 'වප්',
|
||||
month11: 'ඉල්',
|
||||
month12: 'උඳුවප්',
|
||||
week: 'සතිය',
|
||||
weeks: {
|
||||
sun: 'ඉරිදා',
|
||||
mon: 'සඳුදා',
|
||||
tue: 'අඟහ',
|
||||
wed: 'බදාදා',
|
||||
thu: 'බ්රහස්',
|
||||
fri: 'සිකු',
|
||||
sat: 'සෙන'
|
||||
},
|
||||
months: {
|
||||
jan: 'දුරුතු',
|
||||
feb: 'නවම්',
|
||||
mar: 'මැදින්',
|
||||
apr: 'බක්',
|
||||
may: 'වෙසක්',
|
||||
jun: 'පොසොන්',
|
||||
jul: 'ඇසළ',
|
||||
aug: 'නිකිණි',
|
||||
sep: 'බිනර',
|
||||
oct: 'වප්',
|
||||
nov: 'ඉල්',
|
||||
dec: 'උඳුව'
|
||||
}
|
||||
},
|
||||
select: {
|
||||
loading: 'පූරණය වෙමින්',
|
||||
noMatch: 'ගැළපෙන දත්ත නැත',
|
||||
noData: 'දත්ත නැත',
|
||||
placeholder: 'තෝරන්න'
|
||||
},
|
||||
cascader: {
|
||||
noMatch: 'ගැළපෙන දත්ත නැත',
|
||||
loading: 'පූරණය වෙමින්',
|
||||
placeholder: 'තෝරන්න',
|
||||
noData: 'දත්ත නැත'
|
||||
},
|
||||
pagination: {
|
||||
goto: 'වෙත යන්න',
|
||||
pagesize: '/පිටුව',
|
||||
total: 'මුළු {total}',
|
||||
pageClassifier: ''
|
||||
},
|
||||
messagebox: {
|
||||
title: 'පණිවිඩය',
|
||||
confirm: 'හරි',
|
||||
cancel: 'අවලංගු කරන්න',
|
||||
error: 'අනීතික ආදානයකි'
|
||||
},
|
||||
upload: {
|
||||
deleteTip: 'ඉවතලීමට මකන්න ඔබන්න',
|
||||
delete: 'මකන්න',
|
||||
preview: 'පෙරදසුන',
|
||||
continue: 'ඉදිරියට'
|
||||
},
|
||||
table: {
|
||||
emptyText: 'දත්ත නැත',
|
||||
confirmFilter: 'තහවුරු',
|
||||
resetFilter: 'යළි සකසන්න',
|
||||
clearFilter: 'සියල්ල',
|
||||
sumText: 'එකතුව'
|
||||
},
|
||||
tree: {
|
||||
emptyText: 'දත්ත නැත'
|
||||
},
|
||||
transfer: {
|
||||
noMatch: 'ගැළපෙන දත්ත නැත',
|
||||
noData: 'තෝරන්න',
|
||||
titles: ['ලේඛනය 1', 'ලේඛනය 2'], // to be translated
|
||||
filterPlaceholder: 'මූලපදය යොදන්න', // to be translated
|
||||
noCheckedFormat: 'අථක {total}', // to be translated
|
||||
hasCheckedFormat: '{checked}/{total} පරීක්ෂා විය' // to be translated
|
||||
},
|
||||
image: {
|
||||
error: 'අසමත් විය'
|
||||
},
|
||||
pageHeader: {
|
||||
title: 'ආපසු' // to be translated
|
||||
},
|
||||
popconfirm: {
|
||||
confirmButtonText: 'ඔව්',
|
||||
cancelButtonText: 'නැහැ'
|
||||
},
|
||||
empty: {
|
||||
description: 'දත්ත නැත'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -12,8 +12,8 @@ export default {
|
|||
confirm: 'Sawa',
|
||||
selectDate: 'Chagua tarehe',
|
||||
selectTime: 'Chagua Muda',
|
||||
startDate: 'Kuanzia tarehe',
|
||||
startTime: 'Kuanzia saa',
|
||||
startDate: 'Kuanzia Tarehe',
|
||||
startTime: 'Kuanzia Saa',
|
||||
endDate: 'Mpaka Tarehe',
|
||||
endTime: 'Mpaka Saa',
|
||||
prevYear: 'Mwaka uliopita',
|
||||
|
|
@ -27,19 +27,19 @@ export default {
|
|||
month4: 'Aprili',
|
||||
month5: 'Mei',
|
||||
month6: 'Juni',
|
||||
month7: 'Jalai',
|
||||
month7: 'Julai',
|
||||
month8: 'Agosti',
|
||||
month9: 'Septemba',
|
||||
month10: 'Oktoba',
|
||||
month11: 'Novemba',
|
||||
month12: 'Disemba',
|
||||
week: 'wili',
|
||||
week: 'wiki',
|
||||
weeks: {
|
||||
sun: 'J2',
|
||||
mon: 'J3',
|
||||
tue: 'J4',
|
||||
wed: 'J5',
|
||||
thu: 'Alhamis',
|
||||
thu: 'Alhamisi',
|
||||
fri: 'Ijumaa',
|
||||
sat: 'J1'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export default {
|
|||
loading: 'Yuklanmoqda',
|
||||
noMatch: 'Mos maʼlumot yoʻq',
|
||||
noData: 'Maʼlumot yoʻq',
|
||||
placeholder: 'Tanladizngiz'
|
||||
placeholder: 'Tanlang'
|
||||
},
|
||||
cascader: {
|
||||
noMatch: 'Mos maʼlumot topilmadi',
|
||||
|
|
@ -85,8 +85,8 @@ export default {
|
|||
upload: {
|
||||
deleteTip: 'Oʻchirish tugmasini bosib oʻchiring',
|
||||
delete: 'Oʻchirish',
|
||||
preview: 'Oldin koʻrish',
|
||||
continue: 'Davom qilish'
|
||||
preview: 'Oldindan koʻrish',
|
||||
continue: 'Davom etish'
|
||||
},
|
||||
table: {
|
||||
emptyText: 'Boʻsh',
|
||||
|
|
@ -113,8 +113,8 @@ export default {
|
|||
title: 'Orqaga'
|
||||
},
|
||||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
confirmButtonText: 'Tasdiqlash',
|
||||
cancelButtonText: 'Bekor qilish'
|
||||
},
|
||||
empty: {
|
||||
description: 'Boʻsh'
|
||||
|
|
|
|||
|
|
@ -48,19 +48,9 @@ export const parseDate = function(string, format) {
|
|||
};
|
||||
|
||||
export const getDayCountOfMonth = function(year, month) {
|
||||
if (month === 3 || month === 5 || month === 8 || month === 10) {
|
||||
return 30;
|
||||
}
|
||||
if (isNaN(+month)) return 31;
|
||||
|
||||
if (month === 1) {
|
||||
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
|
||||
return 29;
|
||||
} else {
|
||||
return 28;
|
||||
}
|
||||
}
|
||||
|
||||
return 31;
|
||||
return new Date(year, +month + 1, 0).getDate();
|
||||
};
|
||||
|
||||
export const getDayCountOfYear = function(year) {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -239,3 +239,7 @@ export function objToArray(obj) {
|
|||
}
|
||||
return isEmpty(obj) ? [] : [obj];
|
||||
}
|
||||
|
||||
export const isMac = function() {
|
||||
return !Vue.prototype.$isServer && /macintosh|mac os x/i.test(navigator.userAgent);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -88,6 +88,7 @@ import { ElSpinner } from './spinner'
|
|||
import { ElDescriptions } from './descriptions'
|
||||
import { ElDescriptionsItem } from './descriptions-item'
|
||||
import { ElResult } from './result'
|
||||
import { ElStatistic } from './statistic'
|
||||
|
||||
export interface InstallationOptions {
|
||||
locale: any,
|
||||
|
|
@ -376,3 +377,6 @@ export class DescriptionsItem extends ElDescriptionsItem {}
|
|||
|
||||
/** Result Component */
|
||||
export class Result extends ElResult {}
|
||||
|
||||
/** Statistic Component */
|
||||
export class Statistic extends ElStatistic {}
|
||||
|
|
@ -38,4 +38,6 @@ export declare class ElImage extends ElementUIComponent {
|
|||
previewSrcList: string[]
|
||||
|
||||
zIndex: number
|
||||
|
||||
initialIndex: number
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
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