mirror of https://github.com/ElemeFE/element
Merge branch 'ElemeFE:dev' into dev
yangxu52
GitHub
commit
15199873a1
|
|
@ -22,3 +22,4 @@ coverage
|
||||||
waiter.config.js
|
waiter.config.js
|
||||||
build/bin/algolia-key.js
|
build/bin/algolia-key.js
|
||||||
.envrc
|
.envrc
|
||||||
|
.history/
|
||||||
|
|
@ -1,5 +1,51 @@
|
||||||
## Changelog
|
## Changelog
|
||||||
|
|
||||||
|
### 2.15.14
|
||||||
|
|
||||||
|
*2023-08-24*
|
||||||
|
|
||||||
|
#### Bug fixes
|
||||||
|
- Img
|
||||||
|
- Delete referrerpolicy prop (#22651 by @xinguanhua)
|
||||||
|
#### Optimization
|
||||||
|
- Docs
|
||||||
|
- Update readme and website example links (#22642 by @lyfeyaj)
|
||||||
|
- Update popper links (#22539 by @brizer)
|
||||||
|
- I18n
|
||||||
|
- Update translation of Spanish (#22430 by @jcardus)
|
||||||
|
- Add sr-Latn translation (#22567 by @N-M)
|
||||||
|
- Update Uzbek translation (#22390 by @akahon)
|
||||||
|
- Statistics
|
||||||
|
- Fix doc; Optimized code (#22384 by @webvs2)
|
||||||
|
- Table
|
||||||
|
- Add highlight selection row (#22382 by @wangdaodao)
|
||||||
|
|
||||||
|
### 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
|
### 2.15.12
|
||||||
|
|
||||||
*2022-11-16*
|
*2022-11-16*
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,51 @@
|
||||||
## Changelog
|
## Changelog
|
||||||
|
|
||||||
|
### 2.15.14
|
||||||
|
|
||||||
|
*2023-08-24*
|
||||||
|
|
||||||
|
#### Bug fixes
|
||||||
|
- Img
|
||||||
|
- Delete referrerpolicy prop (#22651 by @xinguanhua)
|
||||||
|
#### Optimization
|
||||||
|
- Docs
|
||||||
|
- Update readme and website example links (#22642 by @lyfeyaj)
|
||||||
|
- Update popper links (#22539 by @brizer)
|
||||||
|
- I18n
|
||||||
|
- Update translation of Spanish (#22430 by @jcardus)
|
||||||
|
- Add sr-Latn translation (#22567 by @N-M)
|
||||||
|
- Update Uzbek translation (#22390 by @akahon)
|
||||||
|
- Statistics
|
||||||
|
- Fix doc; Optimized code (#22384 by @webvs2)
|
||||||
|
- Table
|
||||||
|
- Add highlight selection row (#22382 by @wangdaodao)
|
||||||
|
|
||||||
|
### 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
|
### 2.15.12
|
||||||
|
|
||||||
*2022-11-16*
|
*2022-11-16*
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,51 @@
|
||||||
## Changelog
|
## Changelog
|
||||||
|
|
||||||
|
### 2.15.14
|
||||||
|
|
||||||
|
*2023-08-24*
|
||||||
|
|
||||||
|
#### Bug fixes
|
||||||
|
- Img
|
||||||
|
- Delete referrerpolicy prop (#22651 by @xinguanhua)
|
||||||
|
#### Optimization
|
||||||
|
- Docs
|
||||||
|
- Update readme and website example links (#22642 by @lyfeyaj)
|
||||||
|
- Update popper links (#22539 by @brizer)
|
||||||
|
- I18n
|
||||||
|
- Update translation of Spanish (#22430 by @jcardus)
|
||||||
|
- Add sr-Latn translation (#22567 by @N-M)
|
||||||
|
- Update Uzbek translation (#22390 by @akahon)
|
||||||
|
- Statistics
|
||||||
|
- Fix doc; Optimized code (#22384 by @webvs2)
|
||||||
|
- Table
|
||||||
|
- Add highlight selection row (#22382 by @wangdaodao)
|
||||||
|
|
||||||
|
### 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
|
### 2.15.12
|
||||||
|
|
||||||
*2022-11-16*
|
*2022-11-16*
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,51 @@
|
||||||
## 更新日志
|
## 更新日志
|
||||||
|
|
||||||
|
### 2.15.14
|
||||||
|
|
||||||
|
*2023-08-24*
|
||||||
|
|
||||||
|
#### Bug 修复
|
||||||
|
- Img
|
||||||
|
- 删除 referrerpolicy 属性 (#22651 by @xinguanhua)
|
||||||
|
#### 优化
|
||||||
|
- Docs
|
||||||
|
- 更新 readme and website example links (#22642 by @lyfeyaj)
|
||||||
|
- 更新 popper 官方文档链接 (#22539 by @brizer)
|
||||||
|
- I18n
|
||||||
|
- 更新 西班牙语 翻译 (#22430 by @jcardus)
|
||||||
|
- 新增 塞尔维亚语（拉丁) 翻译 (#22567 by @N-M)
|
||||||
|
- 更新 乌兹别克语 翻译 (#22390 by @akahon)
|
||||||
|
- Statistics
|
||||||
|
- 文档更新; 代码优化 (#22384 by @webvs2)
|
||||||
|
- Table
|
||||||
|
- 增加高亮选中行属性 (#22382 by @wangdaodao)
|
||||||
|
|
||||||
|
### 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
|
### 2.15.12
|
||||||
|
|
||||||
*2022-11-16*
|
*2022-11-16*
|
||||||
|
|
|
||||||
|
|
@ -42,10 +42,12 @@ Element will stay with Vue 2.x
|
||||||
|
|
||||||
For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus)(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)
|
||||||
|
|
||||||
|
For MiniProgram development, we recommend using [MorJS](https://github.com/eleme/morjs)
|
||||||
|
|
||||||
## Links
|
## Links
|
||||||
- Homepage and documentation
|
- Homepage and documentation
|
||||||
- [International users](http://element.eleme.io/#/en-US)
|
- [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)
|
- [Spanish users](http://element.eleme.io/#/es)
|
||||||
- [French users](http://element.eleme.io/#/fr-FR)
|
- [French users](http://element.eleme.io/#/fr-FR)
|
||||||
- [awesome-element](https://github.com/ElementUI/awesome-element)
|
- [awesome-element](https://github.com/ElementUI/awesome-element)
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
<a :href="'/#/' + lang + '/component/custom-theme'" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
|
<a :href="'/#/' + lang + '/component/custom-theme'" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
|
||||||
<a href="https://github.com/elemefe/element-react" class="footer-main-link" target="_blank">Element-React</a>
|
<a href="https://github.com/elemefe/element-react" class="footer-main-link" target="_blank">Element-React</a>
|
||||||
<a href="https://github.com/ElemeFE/element-angular" class="footer-main-link" target="_blank">Element-Angular</a>
|
<a href="https://github.com/ElemeFE/element-angular" class="footer-main-link" target="_blank">Element-Angular</a>
|
||||||
|
<a href="https://github.com/eleme/morjs" class="footer-main-link" target="_blank">MorJS</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-main">
|
<div class="footer-main">
|
||||||
<h4>{{ langConfig.community }}</h4>
|
<h4>{{ langConfig.community }}</h4>
|
||||||
|
|
@ -27,8 +28,17 @@
|
||||||
width="120"
|
width="120"
|
||||||
popper-class="footer-popover"
|
popper-class="footer-popover"
|
||||||
trigger="hover">
|
trigger="hover">
|
||||||
<div class="footer-popover-title">{{ langConfig.eleme }} UED</div>
|
<div class="footer-popover-title">{{ langConfig.elemeTech }}</div>
|
||||||
<img src="../assets/images/qrcode.png" alt="">
|
<img src="https://gw.alicdn.com/imgextra/i4/O1CN01dBDgJP1t4R3qikGBP_!!6000000005848-0-tps-344-344.jpg" alt="">
|
||||||
|
</el-popover>
|
||||||
|
<el-popover
|
||||||
|
ref="weixin"
|
||||||
|
placement="top"
|
||||||
|
width="120"
|
||||||
|
popper-class="footer-popover"
|
||||||
|
trigger="hover">
|
||||||
|
<div class="footer-popover-title">{{ langConfig.elemeDesign }}</div>
|
||||||
|
<img src="https://gw.alicdn.com/imgextra/i4/O1CN015ha1O71yg3g1QaKEi_!!6000000006607-0-tps-1280-1280.jpg" alt="">
|
||||||
</el-popover>
|
</el-popover>
|
||||||
<i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
|
<i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
|
||||||
<a href="https://github.com/elemefe" target="_blank">
|
<a href="https://github.com/elemefe" target="_blank">
|
||||||
|
|
|
||||||
|
|
@ -284,8 +284,10 @@
|
||||||
<div class="headerWrapper">
|
<div class="headerWrapper">
|
||||||
<div id="v3-banner" v-if="isHome">
|
<div id="v3-banner" v-if="isHome">
|
||||||
<template v-if="lang === 'zh-CN'">
|
<template v-if="lang === 'zh-CN'">
|
||||||
您正在浏览基于 Vue 2.x 的 Element UI 文档;
|
您正在浏览基于 Vue 2.x 的文档;
|
||||||
<a href="https://element-plus.org/#/zh-CN">点击这里</a> 查看 Vue 3.x 的升级版本
|
<a href="https://element-plus.org/#/zh-CN">点击查看 Vue 3.x 版本。</a>
|
||||||
|
饿了么开源了自研多端框架 MorJS，
|
||||||
|
<a href="https://github.com/eleme/morjs">欢迎点击查看或试用 👏🏻</a>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
You’re browsing the documentation of Element UI for Vue 2.x version.
|
You’re browsing the documentation of Element UI for Vue 2.x version.
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@ Display date.
|
||||||
|-----------------|------------------- |---------- |---------------------- |--------- |
|
|-----------------|------------------- |---------- |---------------------- |--------- |
|
||||||
| value / v-model | binding value | Date/string/number | — | — |
|
| 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 | — | — |
|
| 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
|
### dateCell Scoped Slot Parameters
|
||||||
| Attribute | Description | Type | Accepted Values | Default |
|
| 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 | — |
|
| 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) | — |
|
| 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 | — | — |
|
| 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 |
|
| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
|
||||||
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
|
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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.
|
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
|
```html
|
||||||
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
|
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
|
||||||
<el-form-item label="Activity name">
|
<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 |
|
| 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 | — | - |
|
| preview-src-list | allow big image preview | Array | — | - |
|
||||||
| z-index | set image preview z-index | Number | — | 2000 |
|
| z-index | set image preview z-index | Number | — | 2000 |
|
||||||
|
| initial-index | set image preview array index | Number | — | - |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
| Event Name | Description | Parameters |
|
| Event Name | Description | Parameters |
|
||||||
|
|
|
||||||
|
|
@ -4,17 +4,23 @@ Used to highlight a certain number or group of numbers, such as showing a numeri
|
||||||
|
|
||||||
Countdown mode
|
Countdown mode
|
||||||
|
|
||||||
|
|
||||||
### Basic usage
|
### Basic usage
|
||||||
|
|
||||||
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
|
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
|
||||||
:::demo
|
:::demo
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
|
<el-statistic
|
||||||
|
group-separator=","
|
||||||
|
:precision="2"
|
||||||
|
:value="value2"
|
||||||
|
:title="title"
|
||||||
|
></el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
|
|
@ -23,13 +29,18 @@ The component provides a thousandth place display, but you can use rate to set t
|
||||||
<template slot="formatter">
|
<template slot="formatter">
|
||||||
456/2
|
456/2
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
<el-statistic
|
||||||
|
group-separator=","
|
||||||
|
:precision="2"
|
||||||
|
decimal-separator="."
|
||||||
|
:value="value1"
|
||||||
|
:title="title"
|
||||||
|
>
|
||||||
<template slot="prefix">
|
<template slot="prefix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -38,16 +49,20 @@ The component provides a thousandth place display, but you can use rate to set t
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<span @click="like = !like" class="like">
|
<span @click="like = !like" class="like">
|
||||||
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
<i
|
||||||
|
class="el-icon-star-on"
|
||||||
|
style="color:red"
|
||||||
|
v-show="!!like"
|
||||||
|
></i>
|
||||||
<i class="el-icon-star-off" v-show="!like"></i>
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
</span> </template>
|
</span>
|
||||||
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -63,7 +78,6 @@ export default {
|
||||||
value1: 4154.564,
|
value1: 4154.564,
|
||||||
value2: 2222,
|
value2: 2222,
|
||||||
title: "Growth this year",
|
title: "Growth this year",
|
||||||
input: "Hello Element UI!",
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -76,55 +90,86 @@ export default {
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
### Count down
|
||||||
|
|
||||||
### 倒计时
|
|
||||||
:::warning
|
:::warning
|
||||||
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
|
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
|
||||||
|
|
||||||
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
|
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
|
:::demo Providing a future time via 'value' will enable the countdown function
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="14">
|
<el-col :span="14">
|
||||||
|
<el-card shadow="hover" style="width: 100%; ">
|
||||||
<div style="width: 100%; display: inline-block; ">
|
<div style="width: 100%; display: inline-block; ">
|
||||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
<el-statistic
|
||||||
|
:value="deadline2"
|
||||||
|
time-indices
|
||||||
|
title="🎉Price reduction of goods🎉"
|
||||||
|
>
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
The rush is about to begin
|
panic purchase
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
</el-card>
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
<el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
|
||||||
|
<div style="width: 100%; display: inline-block;">
|
||||||
|
<el-statistic
|
||||||
|
@finish="hilarity"
|
||||||
|
:value="deadline3"
|
||||||
|
time-indices
|
||||||
|
title="The Value of Time"
|
||||||
|
>
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
<el-button type="primary " size="small" @click="add"
|
||||||
|
>add 10s</el-button
|
||||||
|
>
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>文嘉《明日歌》</span>
|
<span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
|
||||||
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
<el-button
|
||||||
|
style="float: right; padding: 3px 0"
|
||||||
|
type="text"
|
||||||
|
@click="clickFn"
|
||||||
|
>suspend</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 16px;text-align: left;">
|
||||||
|
Don't sigh in the past, it is no longer back
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
|
||||||
|
Be wise to improve the present
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
|
||||||
|
To not worry not afraid of the firm will into the complicated future
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 18px;text-align: center; " >明日复明日</div>
|
|
||||||
<div style="font-size: 18px;text-align: center;" >明日何其多</div>
|
|
||||||
|
|
||||||
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
|
|
||||||
|
|
||||||
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
|
|
||||||
<div style="margin-top: 40px;"></div>
|
<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-statistic
|
||||||
|
ref="statistic"
|
||||||
|
@finish="hilarity"
|
||||||
|
format="HH:mm:ss"
|
||||||
|
:value="deadline4"
|
||||||
|
title="Distance to Tomorrow:"
|
||||||
|
time-indices
|
||||||
|
>
|
||||||
|
</el-statistic>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -132,85 +177,76 @@ If you need to add time to the original, please note that the overall time (the
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
format:'HH小时:mm:ss:SSS',
|
|
||||||
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
|
|
||||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||||
deadline3: Date.now() + 1000 * 60 * 30,
|
deadline3: Date.now() + 1000 * 60 * 30,
|
||||||
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||||
|
stop: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
hilarity() {
|
hilarity() {
|
||||||
this.$notify({
|
this.$notify({
|
||||||
title: 'Prompt',
|
title: "Prompt",
|
||||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
message:
|
||||||
duration: 0
|
"Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||||
|
duration: 0,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
clickFn() {
|
clickFn() {
|
||||||
this.$refs.statistic.suspend( this.stop)
|
this.$refs.statistic.suspend(this.stop);
|
||||||
this.stop=!this.stop
|
this.stop = !this.stop;
|
||||||
},
|
},
|
||||||
add() {
|
add() {
|
||||||
this.deadline3= this.deadline3+ 1000 * 10
|
this.deadline3 = this.deadline3 + 1000 * 10;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" >
|
|
||||||
.like {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 25px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Statistic Attributes
|
### Statistic Attributes
|
||||||
|
|
||||||
| Attribute | Description | Type | Accepted Values | Default |
|
| Attribute | Description | Type | Accepted Values | Default |
|
||||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
| ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |
|
||||||
| value | Numerical content | string \| number | - | - |
|
| value | Numerical content | string \| number | - | - |
|
||||||
| decimal-separator | Setting the decimal point | string | - | . |
|
| decimal-separator | Setting the decimal point | string | - | . |
|
||||||
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
||||||
| group-separator | Sets the thousandth identifier | string | - | , |
|
| group-separator | Sets the thousandth identifier | string | - | , |
|
||||||
| precision | numerical precision | number | - | 0 |
|
| precision | numerical precision | number | - | - |
|
||||||
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
|
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
|
||||||
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
||||||
| title | Numeric titles | string \| v-slot | - | - |
|
| title | Numeric titles | string \| v-slot | - | - |
|
||||||
| value-style | Styles numeric values | style | - | - |
|
| value-style | Styles numeric values | style | - | - |
|
||||||
| rate | Set the ratio | number | - | 1000 |
|
| rate | Set the ratio | number | - | 1000 |
|
||||||
|
|
||||||
|
|
||||||
### Statistic Slots
|
### Statistic Slots
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
|------|--------|
|
| --------- | --------------------------- |
|
||||||
| prefix | Numeric prefix |
|
| prefix | Numeric prefix |
|
||||||
| suffix | Suffixes for numeric values |
|
| suffix | Suffixes for numeric values |
|
||||||
| formatter | Numerical content |
|
| formatter | Numerical content |
|
||||||
| title | Numeric titles |
|
| title | Numeric titles |
|
||||||
|
|
||||||
|
|
||||||
### Statistic.Countdown Attributes
|
### Statistic.Countdown Attributes
|
||||||
|
|
||||||
| Attribute | Description | Type | Options | Default |
|
| Attribute | Description | Type | Options | Default |
|
||||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
| ------------ | ---------------------------------------- | ------- | ----------- | ---------- |
|
||||||
| time-indices | Whether to enable the countdown function | boolean | true\|false | false |
|
| time-indices | Whether to enable the countdown function | boolean | true\|false | false |
|
||||||
| value | Required value, enter the bound value | string | — | — |
|
| value | Required value, enter the bound value | string | — | — |
|
||||||
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
|
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
|
||||||
|
|
||||||
### Statistic.Countdown Events
|
### Statistic.Countdown Events
|
||||||
|
|
||||||
| Method | Description | Parameters |
|
| Method | Description | Parameters |
|
||||||
|---------|--------|---------|
|
| ------ | ------------------------------------------ | ---------------- |
|
||||||
| change | Enable in the 'countdown' function | (value: Date) |
|
| change | Enable in the 'countdown' function | (value: Date) |
|
||||||
| finish | Launched after the 'countdown' is complete | (value: boolean) |
|
| finish | Launched after the 'countdown' is complete | (value: boolean) |
|
||||||
|
|
||||||
### Statistic Methods
|
### Statistic Methods
|
||||||
|
|
||||||
| Method | Description | Parameters | CallBack |
|
| Method | Description | Parameters | CallBack |
|
||||||
| ---- | ---- | ---- |---- |
|
| ------- | ------------------- | --------------- | ------------- |
|
||||||
| suspend | Pause the countdown | (value:boolean) | (value: Date) |
|
| suspend | Pause the countdown | (value:boolean) | (value: Date) |
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1817,6 +1817,7 @@ You can customize row index in `type=index` columns.
|
||||||
| fit | whether width of column automatically fits its container | boolean | — | true |
|
| fit | whether width of column automatically fits its container | boolean | — | true |
|
||||||
| show-header | whether Table header is visible | boolean | — | true |
|
| show-header | whether Table header is visible | boolean | — | true |
|
||||||
| highlight-current-row | whether current row is highlighted | boolean | — | false |
|
| highlight-current-row | whether current row is highlighted | boolean | — | false |
|
||||||
|
| highlight-selection-row | whether selection row is highlighted | boolean | — | false |
|
||||||
| current-row-key | key of current row, a set only prop | string,number | — | — |
|
| current-row-key | key of current row, a set only prop | string,number | — | — |
|
||||||
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
|
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
|
||||||
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
|
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
|
||||||
|
|
|
||||||
|
|
@ -187,7 +187,7 @@ Disabled form elements are not supported for Tooltip, more information can be fo
|
||||||
| offset | offset of the Tooltip | number | — | 0 |
|
| offset | offset of the Tooltip | number | — | 0 |
|
||||||
| transition | animation name | string | — | el-fade-in-linear |
|
| transition | animation name | string | — | el-fade-in-linear |
|
||||||
| visible-arrow | whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |
|
| visible-arrow | whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |
|
||||||
| popper-options | [popper.js](https://popper.js.org/documentation.html) parameters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
| popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters | Object | refer to [popper.js](https://popper.js.org/docs/v2/) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||||
| open-delay | delay of appearance, in millisecond | number | — | 0 |
|
| open-delay | delay of appearance, in millisecond | number | — | 0 |
|
||||||
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
|
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
|
||||||
| popper-class | custom class name for Tooltip's popper | string | — | — |
|
| popper-class | custom class name for Tooltip's popper | string | — | — |
|
||||||
|
|
|
||||||
|
|
@ -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 |
|
| 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 | — | - |
|
| 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 |
|
| z-index | establecer el z-index de la vista previa de la imagen | Number | — | 2000 |
|
||||||
|
| initial-index | set image preview array index | Number | — | - |
|
||||||
|
|
||||||
### Eventos
|
### Eventos
|
||||||
| Nombre del evento | Descripción | Parámetros |
|
| Nombre del evento | Descripción | Parámetros |
|
||||||
|
|
|
||||||
|
|
@ -617,7 +617,6 @@ export default {
|
||||||
| ------ | ------------------------------------------------------------ | ------------------------- |
|
| ------ | ------------------------------------------------------------ | ------------------------- |
|
||||||
| blur | Se dispara cuando se pierde el foco | (event: Event) |
|
| blur | Se dispara cuando se pierde el foco | (event: Event) |
|
||||||
| focus | Se dispara cuando se obtiene 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) |
|
| 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) |
|
| 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`. | — |
|
| clear | se dispara cuando la entrada es borrada por el botón generado por el atributo `clearable`. | — |
|
||||||
|
|
|
||||||
|
|
@ -4,17 +4,23 @@ Used to highlight a certain number or group of numbers, such as showing a numeri
|
||||||
|
|
||||||
Countdown mode
|
Countdown mode
|
||||||
|
|
||||||
|
|
||||||
### Basic usage
|
### Basic usage
|
||||||
|
|
||||||
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
|
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
|
||||||
:::demo
|
:::demo
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
|
<el-statistic
|
||||||
|
group-separator=","
|
||||||
|
:precision="2"
|
||||||
|
:value="value2"
|
||||||
|
:title="title"
|
||||||
|
></el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
|
|
@ -23,13 +29,18 @@ The component provides a thousandth place display, but you can use rate to set t
|
||||||
<template slot="formatter">
|
<template slot="formatter">
|
||||||
456/2
|
456/2
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
<el-statistic
|
||||||
|
group-separator=","
|
||||||
|
:precision="2"
|
||||||
|
decimal-separator="."
|
||||||
|
:value="value1"
|
||||||
|
:title="title"
|
||||||
|
>
|
||||||
<template slot="prefix">
|
<template slot="prefix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -38,16 +49,20 @@ The component provides a thousandth place display, but you can use rate to set t
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<span @click="like = !like" class="like">
|
<span @click="like = !like" class="like">
|
||||||
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
<i
|
||||||
|
class="el-icon-star-on"
|
||||||
|
style="color:red"
|
||||||
|
v-show="!!like"
|
||||||
|
></i>
|
||||||
<i class="el-icon-star-off" v-show="!like"></i>
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
</span> </template>
|
</span>
|
||||||
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -63,7 +78,6 @@ export default {
|
||||||
value1: 4154.564,
|
value1: 4154.564,
|
||||||
value2: 2222,
|
value2: 2222,
|
||||||
title: "Growth this year",
|
title: "Growth this year",
|
||||||
input: "Hello Element UI!",
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -76,55 +90,86 @@ export default {
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
### Count down
|
||||||
|
|
||||||
### 倒计时
|
|
||||||
:::warning
|
:::warning
|
||||||
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
|
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
|
||||||
|
|
||||||
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
|
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
|
:::demo Providing a future time via 'value' will enable the countdown function
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="14">
|
<el-col :span="14">
|
||||||
|
<el-card shadow="hover" style="width: 100%; ">
|
||||||
<div style="width: 100%; display: inline-block; ">
|
<div style="width: 100%; display: inline-block; ">
|
||||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
<el-statistic
|
||||||
|
:value="deadline2"
|
||||||
|
time-indices
|
||||||
|
title="🎉Price reduction of goods🎉"
|
||||||
|
>
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
The rush is about to begin
|
panic purchase
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
</el-card>
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
<el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
|
||||||
|
<div style="width: 100%; display: inline-block;">
|
||||||
|
<el-statistic
|
||||||
|
@finish="hilarity"
|
||||||
|
:value="deadline3"
|
||||||
|
time-indices
|
||||||
|
title="The Value of Time"
|
||||||
|
>
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
<el-button type="primary " size="small" @click="add"
|
||||||
|
>add 10s</el-button
|
||||||
|
>
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>文嘉《明日歌》</span>
|
<span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
|
||||||
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
<el-button
|
||||||
|
style="float: right; padding: 3px 0"
|
||||||
|
type="text"
|
||||||
|
@click="clickFn"
|
||||||
|
>suspend</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 16px;text-align: left;">
|
||||||
|
Don't sigh in the past, it is no longer back
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
|
||||||
|
Be wise to improve the present
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
|
||||||
|
To not worry not afraid of the firm will into the complicated future
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 18px;text-align: center; " >明日复明日</div>
|
|
||||||
<div style="font-size: 18px;text-align: center;" >明日何其多</div>
|
|
||||||
|
|
||||||
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
|
|
||||||
|
|
||||||
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
|
|
||||||
<div style="margin-top: 40px;"></div>
|
<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-statistic
|
||||||
|
ref="statistic"
|
||||||
|
@finish="hilarity"
|
||||||
|
format="HH:mm:ss"
|
||||||
|
:value="deadline4"
|
||||||
|
title="Distance to Tomorrow:"
|
||||||
|
time-indices
|
||||||
|
>
|
||||||
|
</el-statistic>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -132,85 +177,76 @@ If you need to add time to the original, please note that the overall time (the
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
format:'HH小时:mm:ss:SSS',
|
|
||||||
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
|
|
||||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||||
deadline3: Date.now() + 1000 * 60 * 30,
|
deadline3: Date.now() + 1000 * 60 * 30,
|
||||||
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||||
|
stop: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
hilarity() {
|
hilarity() {
|
||||||
this.$notify({
|
this.$notify({
|
||||||
title: 'Prompt',
|
title: "Prompt",
|
||||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
message:
|
||||||
duration: 0
|
"Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||||
|
duration: 0,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
clickFn() {
|
clickFn() {
|
||||||
this.$refs.statistic.suspend( this.stop)
|
this.$refs.statistic.suspend(this.stop);
|
||||||
this.stop=!this.stop
|
this.stop = !this.stop;
|
||||||
},
|
},
|
||||||
add() {
|
add() {
|
||||||
this.deadline3= this.deadline3+ 1000 * 10
|
this.deadline3 = this.deadline3 + 1000 * 10;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" >
|
|
||||||
.like {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 25px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Statistic Attributes
|
### Statistic Attributes
|
||||||
|
|
||||||
| Attribute | Description | Type | Accepted Values | Default |
|
| Attribute | Description | Type | Accepted Values | Default |
|
||||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
| ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |
|
||||||
| value | Numerical content | string \| number | - | - |
|
| value | Numerical content | string \| number | - | - |
|
||||||
| decimal-separator | Setting the decimal point | string | - | . |
|
| decimal-separator | Setting the decimal point | string | - | . |
|
||||||
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
||||||
| group-separator | Sets the thousandth identifier | string | - | , |
|
| group-separator | Sets the thousandth identifier | string | - | , |
|
||||||
| precision | numerical precision | number | - | 0 |
|
| precision | numerical precision | number | - | - |
|
||||||
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
|
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
|
||||||
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
||||||
| title | Numeric titles | string \| v-slot | - | - |
|
| title | Numeric titles | string \| v-slot | - | - |
|
||||||
| value-style | Styles numeric values | style | - | - |
|
| value-style | Styles numeric values | style | - | - |
|
||||||
| rate | Set the ratio | number | - | 1000 |
|
| rate | Set the ratio | number | - | 1000 |
|
||||||
|
|
||||||
|
|
||||||
### Statistic Slots
|
### Statistic Slots
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
|------|--------|
|
| --------- | --------------------------- |
|
||||||
| prefix | Numeric prefix |
|
| prefix | Numeric prefix |
|
||||||
| suffix | Suffixes for numeric values |
|
| suffix | Suffixes for numeric values |
|
||||||
| formatter | Numerical content |
|
| formatter | Numerical content |
|
||||||
| title | Numeric titles |
|
| title | Numeric titles |
|
||||||
|
|
||||||
|
|
||||||
### Statistic.Countdown Attributes
|
### Statistic.Countdown Attributes
|
||||||
|
|
||||||
| Attribute | Description | Type | Options | Default |
|
| Attribute | Description | Type | Options | Default |
|
||||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
| ------------ | ---------------------------------------- | ------- | ----------- | ---------- |
|
||||||
| time-indices | Whether to enable the countdown function | boolean | true\|false | false |
|
| time-indices | Whether to enable the countdown function | boolean | true\|false | false |
|
||||||
| value | Required value, enter the bound value | string | — | — |
|
| value | Required value, enter the bound value | string | — | — |
|
||||||
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
|
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
|
||||||
|
|
||||||
### Statistic.Countdown Events
|
### Statistic.Countdown Events
|
||||||
|
|
||||||
| Method | Description | Parameters |
|
| Method | Description | Parameters |
|
||||||
|---------|--------|---------|
|
| ------ | ------------------------------------------ | ---------------- |
|
||||||
| change | Enable in the 'countdown' function | (value: Date) |
|
| change | Enable in the 'countdown' function | (value: Date) |
|
||||||
| finish | Launched after the 'countdown' is complete | (value: boolean) |
|
| finish | Launched after the 'countdown' is complete | (value: boolean) |
|
||||||
|
|
||||||
### Statistic Methods
|
### Statistic Methods
|
||||||
|
|
||||||
| Method | Description | Parameters | CallBack |
|
| Method | Description | Parameters | CallBack |
|
||||||
| ---- | ---- | ---- |---- |
|
| ------- | ------------------- | --------------- | ------------- |
|
||||||
| suspend | Pause the countdown | (value:boolean) | (value: Date) |
|
| suspend | Pause the countdown | (value:boolean) | (value: Date) |
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1822,6 +1822,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
|
||||||
| fit | especifica si el ancho de la columna se adapta automáticamente a su contenedor | boolean | — | true |
|
| fit | especifica si el ancho de la columna se adapta automáticamente a su contenedor | boolean | — | true |
|
||||||
| show-header | especifica si la cabecera de la tabla es visible | boolean | — | true |
|
| show-header | especifica si la cabecera de la tabla es visible | boolean | — | true |
|
||||||
| highlight-current-row | especifica si la fila actual es resaltado | boolean | — | false |
|
| highlight-current-row | especifica si la fila actual es resaltado | boolean | — | false |
|
||||||
|
| highlight-selection-row | resaltar la selección de líneas de verificación | boolean | — | false |
|
||||||
| current-row-key | clave de la fila actual, un ajuste de propiedad única | string,number | — | — |
|
| current-row-key | clave de la fila actual, un ajuste de propiedad única | string,number | — | — |
|
||||||
| row-class-name | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | Function({row, rowIndex})/String | — | — |
|
| row-class-name | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | Function({row, rowIndex})/String | — | — |
|
||||||
| row-style | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | Function({row, rowIndex})/Object | — | — |
|
| row-style | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | Function({row, rowIndex})/Object | — | — |
|
||||||
|
|
|
||||||
|
|
@ -187,7 +187,7 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
|
||||||
| offset | offset del Tooltip | number | — | 0 |
|
| offset | offset del Tooltip | number | — | 0 |
|
||||||
| transition | nombre de animación | string | — | el-fade-in-linear |
|
| transition | nombre de animación | string | — | el-fade-in-linear |
|
||||||
| visible-arrow | si una flecha es mostrada. Para mayor información, revisar la página de [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
|
| visible-arrow | si una flecha es mostrada. Para mayor información, revisar la página de [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
|
||||||
| popper-options | parámetros de [popper.js](https://popper.js.org/documentation.html) | Object | referirse a la documentación de [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
| popper-options | parámetros de [popper.js](https://popper.js.org/docs/v2/) | Object | referirse a la documentación de [popper.js](https://popper.js.org/docs/v2/) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||||
| open-delay | retraso de la apariencia, en mili segundos | number | — | 0 |
|
| open-delay | retraso de la apariencia, en mili segundos | number | — | 0 |
|
||||||
| manual | si el Tooltipo será controlado de forma manual. `mouseenter` y `mouseleave` no tendrán efecto si fue establecido como `true` | boolean | — | false |
|
| manual | si el Tooltipo será controlado de forma manual. `mouseenter` y `mouseleave` no tendrán efecto si fue establecido como `true` | boolean | — | false |
|
||||||
| popper-class | nombre de clase personalizada para el popper del Tooltip | string | — | — |
|
| popper-class | nombre de clase personalizada para el popper del Tooltip | string | — | — |
|
||||||
|
|
|
||||||
|
|
@ -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. |
|
| 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 | — | - |
|
| preview-src-list | allow big image preview | Array | — | - |
|
||||||
| z-index | set image preview z-index | Number | — | 2000 |
|
| z-index | set image preview z-index | Number | — | 2000 |
|
||||||
|
| initial-index | set image preview array index | Number | — | - |
|
||||||
|
|
||||||
### Évènements
|
### Évènements
|
||||||
| Nom | Description | Paramètres |
|
| Nom | Description | Paramètres |
|
||||||
|
|
|
||||||
|
|
@ -603,7 +603,6 @@ export default {
|
||||||
|----| ----| ----|
|
|----| ----| ----|
|
||||||
| blur | Se déclenche quand Input perds le focus. | (event: Event) |
|
| blur | Se déclenche quand Input perds le focus. | (event: Event) |
|
||||||
| focus | Se déclenche quand Input a 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) |
|
| 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) |
|
| 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. | — |
|
| clear | Se déclenche quand le champ est effacé par le bouton de reset. | — |
|
||||||
|
|
|
||||||
|
|
@ -4,17 +4,23 @@ Used to highlight a certain number or group of numbers, such as showing a numeri
|
||||||
|
|
||||||
Countdown mode
|
Countdown mode
|
||||||
|
|
||||||
|
|
||||||
### Basic usage
|
### Basic usage
|
||||||
|
|
||||||
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
|
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
|
||||||
:::demo
|
:::demo
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
|
<el-statistic
|
||||||
|
group-separator=","
|
||||||
|
:precision="2"
|
||||||
|
:value="value2"
|
||||||
|
:title="title"
|
||||||
|
></el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
|
|
@ -23,13 +29,18 @@ The component provides a thousandth place display, but you can use rate to set t
|
||||||
<template slot="formatter">
|
<template slot="formatter">
|
||||||
456/2
|
456/2
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
<el-statistic
|
||||||
|
group-separator=","
|
||||||
|
:precision="2"
|
||||||
|
decimal-separator="."
|
||||||
|
:value="value1"
|
||||||
|
:title="title"
|
||||||
|
>
|
||||||
<template slot="prefix">
|
<template slot="prefix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -38,16 +49,20 @@ The component provides a thousandth place display, but you can use rate to set t
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<span @click="like = !like" class="like">
|
<span @click="like = !like" class="like">
|
||||||
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
<i
|
||||||
|
class="el-icon-star-on"
|
||||||
|
style="color:red"
|
||||||
|
v-show="!!like"
|
||||||
|
></i>
|
||||||
<i class="el-icon-star-off" v-show="!like"></i>
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
</span> </template>
|
</span>
|
||||||
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -63,7 +78,6 @@ export default {
|
||||||
value1: 4154.564,
|
value1: 4154.564,
|
||||||
value2: 2222,
|
value2: 2222,
|
||||||
title: "Growth this year",
|
title: "Growth this year",
|
||||||
input: "Hello Element UI!",
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -76,55 +90,86 @@ export default {
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
### Count down
|
||||||
|
|
||||||
### 倒计时
|
|
||||||
:::warning
|
:::warning
|
||||||
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
|
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
|
||||||
|
|
||||||
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
|
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
|
:::demo Providing a future time via 'value' will enable the countdown function
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="14">
|
<el-col :span="14">
|
||||||
|
<el-card shadow="hover" style="width: 100%; ">
|
||||||
<div style="width: 100%; display: inline-block; ">
|
<div style="width: 100%; display: inline-block; ">
|
||||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
<el-statistic
|
||||||
|
:value="deadline2"
|
||||||
|
time-indices
|
||||||
|
title="🎉Price reduction of goods🎉"
|
||||||
|
>
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
The rush is about to begin
|
panic purchase
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
</el-card>
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
|
<el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
|
||||||
|
<div style="width: 100%; display: inline-block;">
|
||||||
|
<el-statistic
|
||||||
|
@finish="hilarity"
|
||||||
|
:value="deadline3"
|
||||||
|
time-indices
|
||||||
|
title="The Value of Time"
|
||||||
|
>
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
<el-button type="primary " size="small" @click="add"
|
||||||
|
>add 10s</el-button
|
||||||
|
>
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>文嘉《明日歌》</span>
|
<span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
|
||||||
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
<el-button
|
||||||
|
style="float: right; padding: 3px 0"
|
||||||
|
type="text"
|
||||||
|
@click="clickFn"
|
||||||
|
>suspend</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 16px;text-align: left;">
|
||||||
|
Don't sigh in the past, it is no longer back
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
|
||||||
|
Be wise to improve the present
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 16px;text-align: left;margin-top: 15px;">
|
||||||
|
To not worry not afraid of the firm will into the complicated future
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 18px;text-align: center; " >明日复明日</div>
|
|
||||||
<div style="font-size: 18px;text-align: center;" >明日何其多</div>
|
|
||||||
|
|
||||||
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
|
|
||||||
|
|
||||||
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
|
|
||||||
<div style="margin-top: 40px;"></div>
|
<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-statistic
|
||||||
|
ref="statistic"
|
||||||
|
@finish="hilarity"
|
||||||
|
format="HH:mm:ss"
|
||||||
|
:value="deadline4"
|
||||||
|
title="Distance to Tomorrow:"
|
||||||
|
time-indices
|
||||||
|
>
|
||||||
|
</el-statistic>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -132,85 +177,76 @@ If you need to add time to the original, please note that the overall time (the
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
format:'HH小时:mm:ss:SSS',
|
|
||||||
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
|
|
||||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||||
deadline3: Date.now() + 1000 * 60 * 30,
|
deadline3: Date.now() + 1000 * 60 * 30,
|
||||||
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||||
|
stop: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
hilarity() {
|
hilarity() {
|
||||||
this.$notify({
|
this.$notify({
|
||||||
title: 'Prompt',
|
title: "Prompt",
|
||||||
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
|
message:
|
||||||
duration: 0
|
"Time is up, do you know that an inch of gold can't buy an inch of time?",
|
||||||
|
duration: 0,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
clickFn() {
|
clickFn() {
|
||||||
this.$refs.statistic.suspend( this.stop)
|
this.$refs.statistic.suspend(this.stop);
|
||||||
this.stop=!this.stop
|
this.stop = !this.stop;
|
||||||
},
|
},
|
||||||
add() {
|
add() {
|
||||||
this.deadline3= this.deadline3+ 1000 * 10
|
this.deadline3 = this.deadline3 + 1000 * 10;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" >
|
|
||||||
.like {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 25px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Statistic Attributes
|
### Statistic Attributes
|
||||||
|
|
||||||
| Attribute | Description | Type | Accepted Values | Default |
|
| Attribute | Description | Type | Accepted Values | Default |
|
||||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
| ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |
|
||||||
| value | Numerical content | string \| number | - | - |
|
| value | Numerical content | string \| number | - | - |
|
||||||
| decimal-separator | Setting the decimal point | string | - | . |
|
| decimal-separator | Setting the decimal point | string | - | . |
|
||||||
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
| formatter | Custom numerical presentation | v-slot \|({value}) => VNode | - | - |
|
||||||
| group-separator | Sets the thousandth identifier | string | - | , |
|
| group-separator | Sets the thousandth identifier | string | - | , |
|
||||||
| precision | numerical precision | number | - | 0 |
|
| precision | numerical precision | number | - | - |
|
||||||
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
|
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
|
||||||
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
| suffix | Sets the suffix of a number | string \| v-slot | - | - |
|
||||||
| title | Numeric titles | string \| v-slot | - | - |
|
| title | Numeric titles | string \| v-slot | - | - |
|
||||||
| value-style | Styles numeric values | style | - | - |
|
| value-style | Styles numeric values | style | - | - |
|
||||||
| rate | Set the ratio | number | - | 1000 |
|
| rate | Set the ratio | number | - | 1000 |
|
||||||
|
|
||||||
|
|
||||||
### Statistic Slots
|
### Statistic Slots
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
|------|--------|
|
| --------- | --------------------------- |
|
||||||
| prefix | Numeric prefix |
|
| prefix | Numeric prefix |
|
||||||
| suffix | Suffixes for numeric values |
|
| suffix | Suffixes for numeric values |
|
||||||
| formatter | Numerical content |
|
| formatter | Numerical content |
|
||||||
| title | Numeric titles |
|
| title | Numeric titles |
|
||||||
|
|
||||||
|
|
||||||
### Statistic.Countdown Attributes
|
### Statistic.Countdown Attributes
|
||||||
|
|
||||||
| Attribute | Description | Type | Options | Default |
|
| Attribute | Description | Type | Options | Default |
|
||||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
| ------------ | ---------------------------------------- | ------- | ----------- | ---------- |
|
||||||
| time-indices | Whether to enable the countdown function | boolean | true\|false | false |
|
| time-indices | Whether to enable the countdown function | boolean | true\|false | false |
|
||||||
| value | Required value, enter the bound value | string | — | — |
|
| value | Required value, enter the bound value | string | — | — |
|
||||||
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
|
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
|
||||||
|
|
||||||
### Statistic.Countdown Events
|
### Statistic.Countdown Events
|
||||||
|
|
||||||
| Method | Description | Parameters |
|
| Method | Description | Parameters |
|
||||||
|---------|--------|---------|
|
| ------ | ------------------------------------------ | ---------------- |
|
||||||
| change | Enable in the 'countdown' function | (value: Date) |
|
| change | Enable in the 'countdown' function | (value: Date) |
|
||||||
| finish | Launched after the 'countdown' is complete | (value: boolean) |
|
| finish | Launched after the 'countdown' is complete | (value: boolean) |
|
||||||
|
|
||||||
### Statistic Methods
|
### Statistic Methods
|
||||||
|
|
||||||
| Method | Description | Parameters | CallBack |
|
| Method | Description | Parameters | CallBack |
|
||||||
| ---- | ---- | ---- |---- |
|
| ------- | ------------------- | --------------- | ------------- |
|
||||||
| suspend | Pause the countdown | (value:boolean) | (value: Date) |
|
| suspend | Pause the countdown | (value:boolean) | (value: Date) |
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1824,6 +1824,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
|
||||||
| fit | Si la largeur des colonnes s'adapte au conteneur. | boolean | — | true |
|
| fit | Si la largeur des colonnes s'adapte au conteneur. | boolean | — | true |
|
||||||
| show-header | Si le header de la table est visible. | boolean | — | true |
|
| show-header | Si le header de la table est visible. | boolean | — | true |
|
||||||
| highlight-current-row | Si la ligne courante est mise en valeur. | boolean | — | false |
|
| highlight-current-row | Si la ligne courante est mise en valeur. | boolean | — | false |
|
||||||
|
| highlight-selection-row | Sélectionner la ligne à cocher en surbrillance | boolean | — | false |
|
||||||
| current-row-key | Clé de la ligne actuelle. Propriété set-only. | string,number | — | — |
|
| current-row-key | Clé de la ligne actuelle. Propriété set-only. | string,number | — | — |
|
||||||
| row-class-name | Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne. | Function({row, rowIndex})/String | — | — |
|
| row-class-name | Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne. | Function({row, rowIndex})/String | — | — |
|
||||||
| row-style | Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne. | Function({row, rowIndex})/Object | — | — |
|
| row-style | Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne. | Function({row, rowIndex})/Object | — | — |
|
||||||
|
|
|
||||||
|
|
@ -188,7 +188,7 @@ Les éléments de formulaire désactivés ne sont pas supportés par Tooltip, pl
|
||||||
| offset | Décalage du Tooltip. | number | — | 0 |
|
| offset | Décalage du Tooltip. | number | — | 0 |
|
||||||
| transition | Animation de transition. | string | — | el-fade-in-linear |
|
| transition | Animation de transition. | string | — | el-fade-in-linear |
|
||||||
| visible-arrow | Si une flèche doit être affichée. Pour plus d'information, voir [Vue-popper](https://github.com/element-component/vue-popper). | boolean | — | true |
|
| visible-arrow | Si une flèche doit être affichée. Pour plus d'information, voir [Vue-popper](https://github.com/element-component/vue-popper). | boolean | — | true |
|
||||||
| popper-options | Paramètres [popper.js](https://popper.js.org/documentation.html). | Object | Se référer à [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
| popper-options | Paramètres [popper.js](https://popper.js.org/docs/v2/). | Object | Se référer à [popper.js](https://popper.js.org/docs/v2/). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||||
| open-delay | Délai avant l'apparition en millisecondes. | number | — | 0 |
|
| open-delay | Délai avant l'apparition en millisecondes. | number | — | 0 |
|
||||||
| manual | Si le contrôle du Tooltip doit être manuel. `mouseenter` et `mouseleave` n'auront pas d'effet si `true`. | boolean | — | false |
|
| manual | Si le contrôle du Tooltip doit être manuel. `mouseenter` et `mouseleave` n'auront pas d'effet si `true`. | boolean | — | false |
|
||||||
| popper-class | Classe du popper de Tooltip. | string | — | — |
|
| popper-class | Classe du popper de Tooltip. | string | — | — |
|
||||||
|
|
|
||||||
|
|
@ -147,6 +147,7 @@
|
||||||
| scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
|
| scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
|
||||||
| preview-src-list | 开启图片预览功能 | Array | — | - |
|
| preview-src-list | 开启图片预览功能 | Array | — | - |
|
||||||
| z-index | 设置图片预览的 z-index | Number | — | 2000 |
|
| z-index | 设置图片预览的 z-index | Number | — | 2000 |
|
||||||
|
| initial-index | 图片预览初始图片index | Number | — | - |
|
||||||
|
|
||||||
### Events
|
### 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
|
```html
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<span class="demonstration">页数较少时的效果</span>
|
<span class="demonstration">页数较少时的效果</span>
|
||||||
|
|
|
||||||
|
|
@ -4,17 +4,23 @@
|
||||||
|
|
||||||
倒计时模式
|
倒计时模式
|
||||||
|
|
||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
组件提供千分位的展示，不过可以通过 rate 来设置相应万分位等
|
组件提供千分位的展示，不过可以通过 rate 来设置相应万分位等
|
||||||
:::demo
|
:::demo
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
|
<el-statistic
|
||||||
|
group-separator=","
|
||||||
|
:precision="2"
|
||||||
|
:value="value2"
|
||||||
|
:title="title"
|
||||||
|
></el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
|
|
@ -23,13 +29,18 @@
|
||||||
<template slot="formatter">
|
<template slot="formatter">
|
||||||
456/2
|
456/2
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
|
<el-statistic
|
||||||
|
group-separator=","
|
||||||
|
:precision="2"
|
||||||
|
decimal-separator="."
|
||||||
|
:value="value1"
|
||||||
|
:title="title"
|
||||||
|
>
|
||||||
<template slot="prefix">
|
<template slot="prefix">
|
||||||
<i class="el-icon-s-flag" style="color: red"></i>
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -38,16 +49,20 @@
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
<el-statistic :value="like ? 521 : 520" title="Feedback">
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<span @click="like = !like" class="like">
|
<span @click="like = !like" class="like">
|
||||||
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
|
<i
|
||||||
|
class="el-icon-star-on"
|
||||||
|
style="color:red"
|
||||||
|
v-show="!!like"
|
||||||
|
></i>
|
||||||
<i class="el-icon-star-off" v-show="!like"></i>
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
</span> </template>
|
</span>
|
||||||
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -61,9 +76,8 @@ export default {
|
||||||
return {
|
return {
|
||||||
like: true,
|
like: true,
|
||||||
value1: 4154.564,
|
value1: 4154.564,
|
||||||
value2: 2222,
|
value2: 1314,
|
||||||
title: "今年的增长",
|
title: "增长人数",
|
||||||
input: "Hello Element UI!",
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -76,55 +90,88 @@ export default {
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
### 倒计时
|
### 倒计时
|
||||||
:::warning
|
|
||||||
suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为value指向的是未来的时间节点**。
|
|
||||||
|
|
||||||
|
:::warning
|
||||||
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
|
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
|
||||||
:::
|
:::
|
||||||
:::demo 通过 `value` 提供未来的时间，将开启倒计时功能
|
:::demo 通过 `value` 提供未来的时间，将开启倒计时功能
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="14">
|
<el-col :span="14">
|
||||||
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
<div style="width: 100%; display: inline-block; ">
|
<div style="width: 100%; display: inline-block; ">
|
||||||
<el-statistic :value="deadline2" time-indices title="商品降价">
|
<el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
抢购即将开始
|
抢购即将开始
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
|
</el-card>
|
||||||
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="一寸光阴一寸金">
|
<el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
|
||||||
|
<div style="width: 100%; display: inline-block; ">
|
||||||
|
<el-statistic
|
||||||
|
@finish="hilarity"
|
||||||
|
:value="deadline3"
|
||||||
|
time-indices
|
||||||
|
title="时间游戏"
|
||||||
|
>
|
||||||
<template slot="suffix">
|
<template slot="suffix">
|
||||||
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
|
<el-button type="primary " size="mini" @click="add"
|
||||||
|
>add 10s</el-button
|
||||||
|
>
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
|
||||||
|
<div style="width: 100%; display: inline-block;">
|
||||||
|
<el-statistic
|
||||||
|
format="DD天HH小时mm分钟"
|
||||||
|
:value="deadline5"
|
||||||
|
time-indices
|
||||||
|
title="🚩距离立夏还有："
|
||||||
|
>
|
||||||
|
</el-statistic>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-card shadow="hover" style="width: 100%;">
|
<el-card shadow="hover" style="width: 100%;">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>文嘉《明日歌》</span>
|
<span>文嘉《明日歌》</span>
|
||||||
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
|
<el-button
|
||||||
|
style="float: right; padding: 3px 0"
|
||||||
|
type="text"
|
||||||
|
@click="clickFn"
|
||||||
|
>暂停</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 18px;text-align: center; margin-top: 35px;">
|
||||||
|
明日复明日
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 18px;text-align: center; " >明日复明日</div>
|
|
||||||
<div style="font-size: 18px;text-align: center;">明日何其多</div>
|
<div style="font-size: 18px;text-align: center;">明日何其多</div>
|
||||||
|
|
||||||
<div style="font-size: 18px;text-align: center;">我生待明日</div>
|
<div style="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>
|
<div style="margin-top: 35px;"></div>
|
||||||
<el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="距离明日：" time-indices > </el-statistic>
|
<el-statistic
|
||||||
|
ref="statistic"
|
||||||
|
@finish="hilarity"
|
||||||
|
format="HH:mm:ss"
|
||||||
|
:value="deadline4"
|
||||||
|
title="距离明日："
|
||||||
|
time-indices
|
||||||
|
>
|
||||||
|
</el-statistic>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -132,85 +179,76 @@ suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为valu
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
format:'HH小时:mm:ss:SSS',
|
|
||||||
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
|
|
||||||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||||||
deadline3: Date.now() + 1000 * 60 * 30,
|
deadline3: Date.now() + 1000 * 60 * 30,
|
||||||
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
|
||||||
|
deadline5: new Date("2023-05-06"),
|
||||||
|
stop: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
hilarity() {
|
hilarity() {
|
||||||
this.$notify({
|
this.$notify({
|
||||||
title: '提示',
|
title: "提示",
|
||||||
message: '时间已到，你可知寸金难买寸光阴？',
|
message: "时间已到",
|
||||||
duration: 0
|
duration: 0,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
clickFn() {
|
clickFn() {
|
||||||
this.$refs.statistic.suspend( this.stop)
|
this.$refs.statistic.suspend(this.stop);
|
||||||
this.stop=!this.stop
|
this.stop = !this.stop;
|
||||||
},
|
},
|
||||||
add() {
|
add() {
|
||||||
this.deadline3= this.deadline3+ 1000 * 10
|
this.deadline3 = this.deadline3 + 1000 * 10;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" >
|
|
||||||
.like {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 25px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Statistic Attributes
|
### Statistic Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
| ----------------- | ---------------- | --------------------------- | ------ | ------ |
|
||||||
| value | 数值内容 | string \| number | - | - |
|
| value | 数值内容 | string \| number | — | — |
|
||||||
| decimal-separator | 设置小数点 | string | - | . |
|
| decimal-separator | 设置小数点 | string | — | . |
|
||||||
| formatter | 自定义数值展示| v-slot \|({value}) => VNode | - | - |
|
| formatter | 自定义数值展示 | v-slot \|({value}) => VNode | — | — |
|
||||||
| group-separator | 设置千分位标识符 | string | - | , |
|
| group-separator | 设置千分位标识符 | string | — | , |
|
||||||
| precision | 数值精度 | number | - | 0 |
|
| precision | 数值精度 | number | — | — |
|
||||||
| prefix | 设置数值的前缀 | string \| v-slot | - | - |
|
| prefix | 设置数值的前缀 | string \| v-slot | — | — |
|
||||||
| suffix |设置数值的后缀 | string \| v-slot | - | - |
|
| suffix | 设置数值的后缀 | string \| v-slot | — | — |
|
||||||
| title | 数值的标题 | string \| v-slot | - | - |
|
| title | 数值的标题 | string \| v-slot | — | — |
|
||||||
| value-style | 设置数值的样式 | style | - | - |
|
| value-style | 设置数值的样式 | object | — | — |
|
||||||
| rate | 设置倍率 | number | - | 1000 |
|
| rate | 设置倍率 | number | — | 1000 |
|
||||||
|
|
||||||
|
|
||||||
### Statistic Slots
|
### Statistic Slots
|
||||||
|
|
||||||
| name | 说明 |
|
| name | 说明 |
|
||||||
|------|--------|
|
| --------- | ---------- |
|
||||||
| prefix | 数值的前缀 |
|
| prefix | 数值的前缀 |
|
||||||
| suffix | 数值的后缀 |
|
| suffix | 数值的后缀 |
|
||||||
| formatter | 数值内容 |
|
| formatter | 数值内容 |
|
||||||
| title | 数值的标题 |
|
| title | 数值的标题 |
|
||||||
|
|
||||||
|
|
||||||
### Statistic.Countdown Attributes
|
### Statistic.Countdown Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
| ------------ | ------------------ | ------- | ----------- | ---------- |
|
||||||
| time-indices | 是否开启倒计时功能 | boolean | true\|false | false |
|
| time-indices | 是否开启倒计时功能 | boolean | true\|false | false |
|
||||||
| value | 必填值，输入绑定值 | string | — | — |
|
| value | 必填值，输入绑定值 | string | — | — |
|
||||||
| format | 格式化倒计时展示 | string | — | 'HH:mm:ss' |
|
| format | 格式化倒计时展示 | string | — | 'HH:mm:ss' |
|
||||||
|
|
||||||
### Statistic.Countdown Events
|
### Statistic.Countdown Events
|
||||||
|
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|---------|--------|---------|
|
| -------- | ---------------------- | ---------------- |
|
||||||
| change | 在`倒计时`的功能中开启 | (value: Date) |
|
| change | 在`倒计时`的功能中开启 | (value: Date) |
|
||||||
| finish | 在`倒计时` 完成后启动 | (value: boolean) |
|
| finish | 在`倒计时` 完成后启动 | (value: boolean) |
|
||||||
|
|
||||||
### Statistic Methods
|
### Statistic Methods
|
||||||
|
|
||||||
| 方法名 | 说明 | 参数 | 回调参数 |
|
| 方法名 | 说明 | 参数 | 回调参数 |
|
||||||
| ---- | ---- | ---- |---- |
|
| ------- | ---------- | --------------- | ------------- |
|
||||||
| suspend | 暂停倒计时 | (value:boolean) | (value: Date) |
|
| suspend | 暂停倒计时 | (value:boolean) | (value: Date) |
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1860,6 +1860,7 @@
|
||||||
| fit | 列的宽度是否自撑开 | boolean | — | true |
|
| fit | 列的宽度是否自撑开 | boolean | — | true |
|
||||||
| show-header | 是否显示表头 | boolean | — | true |
|
| show-header | 是否显示表头 | boolean | — | true |
|
||||||
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
|
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
|
||||||
|
| highlight-selection-row | 是否要高亮复选框选中行（仅针对开启 `selection` 有效） | boolean | — | false |
|
||||||
| current-row-key | 当前行的 key，只写属性 | String,Number | — | — |
|
| current-row-key | 当前行的 key，只写属性 | String,Number | — | — |
|
||||||
| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
|
| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
|
||||||
| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
|
| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
|
||||||
|
|
|
||||||
|
|
@ -168,7 +168,7 @@ tooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozill
|
||||||
| offset | 出现位置的偏移量 | Number | — | 0 |
|
| offset | 出现位置的偏移量 | Number | — | 0 |
|
||||||
| transition | 定义渐变动画 | String | — | el-fade-in-linear |
|
| transition | 定义渐变动画 | String | — | el-fade-in-linear |
|
||||||
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
|
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
|
||||||
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { 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 } |
|
||||||
| open-delay | 延迟出现，单位毫秒 | Number | — | 0 |
|
| open-delay | 延迟出现，单位毫秒 | Number | — | 0 |
|
||||||
| manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
|
| manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
|
||||||
| popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |
|
| popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,9 @@
|
||||||
"starter": "脚手架",
|
"starter": "脚手架",
|
||||||
"feedback": "反馈建议",
|
"feedback": "反馈建议",
|
||||||
"contribution": "贡献指南",
|
"contribution": "贡献指南",
|
||||||
"eleme": "饿了么"
|
"eleme": "饿了么",
|
||||||
|
"elemeTech": "饿了么技术",
|
||||||
|
"elemeDesign": "饿了么设计"
|
||||||
},
|
},
|
||||||
"header": {
|
"header": {
|
||||||
"guide": "指南",
|
"guide": "指南",
|
||||||
|
|
@ -49,7 +51,9 @@
|
||||||
"starter": "Starter kit",
|
"starter": "Starter kit",
|
||||||
"feedback": "Feedback",
|
"feedback": "Feedback",
|
||||||
"contribution": "Contribution",
|
"contribution": "Contribution",
|
||||||
"eleme": "Eleme"
|
"eleme": "Eleme",
|
||||||
|
"elemeTech": "Eleme Tech",
|
||||||
|
"elemeDesign": "Eleme Design"
|
||||||
},
|
},
|
||||||
"header": {
|
"header": {
|
||||||
"guide": "Guide",
|
"guide": "Guide",
|
||||||
|
|
@ -80,7 +84,9 @@
|
||||||
"starter": "Kit de inicio",
|
"starter": "Kit de inicio",
|
||||||
"feedback": "Comentarios",
|
"feedback": "Comentarios",
|
||||||
"contribution": "Contribución",
|
"contribution": "Contribución",
|
||||||
"eleme": "Eleme"
|
"eleme": "Eleme",
|
||||||
|
"elemeTech": "Eleme Tecnología",
|
||||||
|
"elemeDesign": "Eleme Diseño"
|
||||||
},
|
},
|
||||||
"header": {
|
"header": {
|
||||||
"guide": "Guía",
|
"guide": "Guía",
|
||||||
|
|
@ -111,7 +117,9 @@
|
||||||
"starter": "Kit de démarrage",
|
"starter": "Kit de démarrage",
|
||||||
"feedback": "Commentaires",
|
"feedback": "Commentaires",
|
||||||
"contribution": "Contribution",
|
"contribution": "Contribution",
|
||||||
"eleme": "Eleme"
|
"eleme": "Eleme",
|
||||||
|
"elemeTech": "Eleme Technologie",
|
||||||
|
"elemeDesign": "Eleme Conception"
|
||||||
},
|
},
|
||||||
"header": {
|
"header": {
|
||||||
"guide": "Guide",
|
"guide": "Guide",
|
||||||
|
|
|
||||||
|
|
@ -506,6 +506,10 @@
|
||||||
{
|
{
|
||||||
"path": "/result",
|
"path": "/result",
|
||||||
"title": "Result"
|
"title": "Result"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/statistic",
|
||||||
|
"title": "Statistic"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -625,10 +629,6 @@
|
||||||
{
|
{
|
||||||
"path": "/drawer",
|
"path": "/drawer",
|
||||||
"title": "Drawer"
|
"title": "Drawer"
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/statistic",
|
|
||||||
"title": "Statistic"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -824,6 +824,10 @@
|
||||||
{
|
{
|
||||||
"path": "/result",
|
"path": "/result",
|
||||||
"title": "Result"
|
"title": "Result"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/statistic",
|
||||||
|
"title": "Statistic"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -943,10 +947,6 @@
|
||||||
{
|
{
|
||||||
"path": "/drawer",
|
"path": "/drawer",
|
||||||
"title": "Drawer"
|
"title": "Drawer"
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/statistic",
|
|
||||||
"title": "Statistic"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -1142,6 +1142,10 @@
|
||||||
{
|
{
|
||||||
"path": "/result",
|
"path": "/result",
|
||||||
"title": "Result"
|
"title": "Result"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/statistic",
|
||||||
|
"title": "Statistic"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -1261,10 +1265,6 @@
|
||||||
{
|
{
|
||||||
"path": "/drawer",
|
"path": "/drawer",
|
||||||
"title": "Drawer"
|
"title": "Drawer"
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/statistic",
|
|
||||||
"title": "Statistic"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.12":"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.14":"2.15"}
|
||||||
|
|
@ -1,13 +1,14 @@
|
||||||
{
|
{
|
||||||
"name": "element-ui",
|
"name": "element-ui",
|
||||||
"version": "2.15.12",
|
"version": "2.15.14",
|
||||||
"description": "A Component Library for Vue.js.",
|
"description": "A Component Library for Vue.js.",
|
||||||
"main": "lib/element-ui.common.js",
|
"main": "lib/element-ui.common.js",
|
||||||
"files": [
|
"files": [
|
||||||
"lib",
|
"lib",
|
||||||
"src",
|
"src",
|
||||||
"packages",
|
"packages",
|
||||||
"types"
|
"types",
|
||||||
|
"web-types.json"
|
||||||
],
|
],
|
||||||
"typings": "types/index.d.ts",
|
"typings": "types/index.d.ts",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,8 @@
|
||||||
zIndex: {
|
zIndex: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 2000
|
default: 2000
|
||||||
}
|
},
|
||||||
|
initialIndex: Number
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -95,9 +96,15 @@
|
||||||
},
|
},
|
||||||
imageIndex() {
|
imageIndex() {
|
||||||
let previewIndex = 0;
|
let previewIndex = 0;
|
||||||
|
const initialIndex = this.initialIndex;
|
||||||
|
if (initialIndex >= 0) {
|
||||||
|
previewIndex = initialIndex;
|
||||||
|
return previewIndex;
|
||||||
|
}
|
||||||
const srcIndex = this.previewSrcList.indexOf(this.src);
|
const srcIndex = this.previewSrcList.indexOf(this.src);
|
||||||
if (srcIndex >= 0) {
|
if (srcIndex >= 0) {
|
||||||
previewIndex = srcIndex;
|
previewIndex = srcIndex;
|
||||||
|
return previewIndex;
|
||||||
}
|
}
|
||||||
return previewIndex;
|
return previewIndex;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="el-statistic">
|
<div class="el-statistic">
|
||||||
<div class="head">
|
<div class="head" v-if="title||$slots.title">
|
||||||
<slot name="title">
|
<slot name="title">
|
||||||
<span class="title">
|
<span class="title">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="con">
|
<div class="con">
|
||||||
<span class="prefix">
|
<span class="prefix" v-if="prefix||$slots.prefix">
|
||||||
<slot name="prefix" >
|
<slot name="prefix" >
|
||||||
{{ prefix }}
|
{{ prefix }}
|
||||||
</slot>
|
</slot>
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
<span class="number" :style="valueStyle">
|
<span class="number" :style="valueStyle">
|
||||||
<slot name="formatter"> {{ disposeValue }}</slot>
|
<slot name="formatter"> {{ disposeValue }}</slot>
|
||||||
</span>
|
</span>
|
||||||
<span class="suffix">
|
<span class="suffix" v-if="suffix||$slots.suffix">
|
||||||
<slot name="suffix">
|
<slot name="suffix">
|
||||||
{{ suffix }}
|
{{ suffix }}
|
||||||
</slot>
|
</slot>
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { isNumber, ceil, fill, chain, multiply, padStart, reduce} from 'element-ui/src/utils/lodash';
|
import { isNumber, chain, multiply, padStart, reduce} from 'element-ui/src/utils/lodash';
|
||||||
export default {
|
export default {
|
||||||
name: 'ElStatistic',
|
name: 'ElStatistic',
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -47,10 +47,10 @@ export default {
|
||||||
},
|
},
|
||||||
precision: {
|
precision: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: null
|
||||||
},
|
},
|
||||||
value: {
|
value: {
|
||||||
type: [String, Number],
|
type: [String, Number, Date],
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
prefix: {
|
prefix: {
|
||||||
|
|
@ -90,44 +90,40 @@ export default {
|
||||||
watch: {
|
watch: {
|
||||||
value: function() {
|
value: function() {
|
||||||
this.branch();
|
this.branch();
|
||||||
|
},
|
||||||
|
groupSeparator() {
|
||||||
|
this.dispose();
|
||||||
|
},
|
||||||
|
mulriple() {
|
||||||
|
this.dispose();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
branch() {
|
branch() {
|
||||||
let { timeIndices, countDown, dispose} = this;
|
let { timeIndices, countDown, dispose} = this;
|
||||||
timeIndices ? countDown() : dispose();
|
if (timeIndices) {
|
||||||
|
countDown(this.value.valueOf() || this.value);
|
||||||
|
} else {
|
||||||
|
dispose();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
magnification(num, _mulriple = 1000, _groupSeparator = ',') {
|
magnification(num, mulriple = 1000, groupSeparator = ',') {
|
||||||
// magnification factor
|
// magnification factor
|
||||||
const level = String(_mulriple).length - 1;
|
const level = String(mulriple).length ;
|
||||||
const reg = new RegExp(`\\d{1,${level}}(?=(\\d{${level}})+$)`, 'g');
|
return num.replace(new RegExp(`(\\d)(?=(\\d{${level - 1}})+$)`, 'g'), `$1${groupSeparator}`);
|
||||||
const result = String(num)
|
|
||||||
.replace(reg, '$&,')
|
|
||||||
.split(',')
|
|
||||||
.join(_groupSeparator);
|
|
||||||
return result;
|
|
||||||
},
|
},
|
||||||
dispose() {
|
dispose() {
|
||||||
let { value, precision, groupSeparator, rate } = this;
|
let { value, rate, groupSeparator } = this;
|
||||||
|
|
||||||
if (!isNumber(value)) return false;
|
if (!isNumber(value)) return false;
|
||||||
if (precision) {
|
if (this.precision) {
|
||||||
value = ceil(value, precision);
|
value = value.toFixed(this.precision);
|
||||||
}
|
}
|
||||||
|
let [integer, decimal] = String(value).split('.');
|
||||||
let integer = String(value).split('.')[0];
|
|
||||||
let decimals =
|
|
||||||
String(value).split('.')[1] ||
|
|
||||||
(precision ? fill(Array(precision), 0).join('') : '');
|
|
||||||
let result = 0;
|
|
||||||
// 1000 multiplying power
|
// 1000 multiplying power
|
||||||
if (groupSeparator) {
|
if (groupSeparator) {
|
||||||
integer = this.magnification(integer, rate, groupSeparator);
|
integer = this.magnification(integer, rate, groupSeparator);
|
||||||
}
|
}
|
||||||
|
let result = `${integer}${decimal ? this.decimalSeparator + decimal : ''}`;
|
||||||
result = [integer, decimals].join(
|
|
||||||
decimals ? this.decimalSeparator : ''
|
|
||||||
);
|
|
||||||
this.disposeValue = result;
|
this.disposeValue = result;
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
|
|
@ -140,7 +136,6 @@ export default {
|
||||||
clearInterval(this.timeTask);
|
clearInterval(this.timeTask);
|
||||||
this.timeTask = null;
|
this.timeTask = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
this.branch();
|
this.branch();
|
||||||
}
|
}
|
||||||
|
|
@ -190,13 +185,12 @@ export default {
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
countDown() {
|
countDown(timeVlaue) {
|
||||||
let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend } = this;
|
let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend } = this;
|
||||||
if (timeTask) return;
|
if (timeTask) return;
|
||||||
let than = this;
|
let than = this;
|
||||||
this.timeTask = setInterval(()=> {
|
this.timeTask = setInterval(()=> {
|
||||||
let {value} = than;
|
let diffTiem = diffDate(timeVlaue, Date.now());
|
||||||
let diffTiem = diffDate(value, Date.now());
|
|
||||||
than.disposeValue = formatTimeStr(diffTiem);
|
than.disposeValue = formatTimeStr(diffTiem);
|
||||||
stopTime(diffTiem);
|
stopTime(diffTiem);
|
||||||
}, REFRESH_INTERVAL);
|
}, REFRESH_INTERVAL);
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { arrayFindIndex } from 'element-ui/src/utils/util';
|
import { arrayFindIndex } from 'element-ui/src/utils/util';
|
||||||
import { getCell, getColumnByCell, getRowIdentity } from './util';
|
import { getCell, getColumnByCell, getRowIdentity, objectEquals } from './util';
|
||||||
import { getStyle, hasClass, removeClass, addClass } from 'element-ui/src/utils/dom';
|
import { getStyle, hasClass, removeClass, addClass } from 'element-ui/src/utils/dom';
|
||||||
import ElCheckbox from 'element-ui/packages/checkbox';
|
import ElCheckbox from 'element-ui/packages/checkbox';
|
||||||
import ElTooltip from 'element-ui/packages/tooltip';
|
import ElTooltip from 'element-ui/packages/tooltip';
|
||||||
|
|
@ -168,11 +168,20 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
getRowClass(row, rowIndex) {
|
getRowClass(row, rowIndex) {
|
||||||
|
let selection = this.store.states.selection;
|
||||||
const classes = ['el-table__row'];
|
const classes = ['el-table__row'];
|
||||||
if (this.table.highlightCurrentRow && row === this.store.states.currentRow) {
|
if (this.table.highlightCurrentRow && row === this.store.states.currentRow) {
|
||||||
classes.push('current-row');
|
classes.push('current-row');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.table.highlightSelectionRow) {
|
||||||
|
for (let i = 0; i < selection.length; i++) {
|
||||||
|
if (objectEquals(row, selection[i])) {
|
||||||
|
classes.push('selection-row');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
if (this.stripe && rowIndex % 2 === 1) {
|
if (this.stripe && rowIndex % 2 === 1) {
|
||||||
classes.push('el-table__row--striped');
|
classes.push('el-table__row--striped');
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -295,6 +295,11 @@
|
||||||
|
|
||||||
highlightCurrentRow: Boolean,
|
highlightCurrentRow: Boolean,
|
||||||
|
|
||||||
|
highlightSelectionRow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
|
||||||
currentRowKey: [String, Number],
|
currentRowKey: [String, Number],
|
||||||
|
|
||||||
emptyText: String,
|
emptyText: String,
|
||||||
|
|
|
||||||
|
|
@ -253,3 +253,21 @@ export function walkTreeNode(root, cb, childrenKey = 'children', lazyKey = 'hasC
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const objectEquals = function(objectA, objectB) {
|
||||||
|
// 取对象a和b的属性名
|
||||||
|
let aProps = Object.getOwnPropertyNames(objectA);
|
||||||
|
let bProps = Object.getOwnPropertyNames(objectB);
|
||||||
|
// 判断属性名的length是否一致
|
||||||
|
if (aProps.length !== bProps.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// 循环取出属性名，再判断属性值是否一致
|
||||||
|
for (let i = 0; i < aProps.length; i++) {
|
||||||
|
let propName = aProps[i];
|
||||||
|
if (objectA[propName] !== objectB[propName]) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "element-theme-chalk",
|
"name": "element-theme-chalk",
|
||||||
"version": "2.15.12",
|
"version": "2.15.14",
|
||||||
"description": "Element component chalk theme.",
|
"description": "Element component chalk theme.",
|
||||||
"main": "lib/index.css",
|
"main": "lib/index.css",
|
||||||
"style": "lib/index.css",
|
"style": "lib/index.css",
|
||||||
|
|
|
||||||
|
|
@ -2,34 +2,35 @@
|
||||||
@import "common/var";
|
@import "common/var";
|
||||||
|
|
||||||
@include b(statistic) {
|
@include b(statistic) {
|
||||||
|
$statistic-justify: center;
|
||||||
|
$statistic-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: $--color-black;
|
color: $--color-black;
|
||||||
font-size: 14px;
|
|
||||||
font-variant: tabular-nums;
|
font-variant: tabular-nums;
|
||||||
line-height: 1.5715;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
font-feature-settings: "tnum";
|
font-feature-settings: "tnum";
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.head {
|
.head {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
color: #00000073;
|
color: $--color-text-regular;
|
||||||
font-size: 14px;
|
font-size: $--font-size-small;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.con {
|
.con {
|
||||||
font-family: Sans-serif;
|
font-family: Sans-serif;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content :center;
|
justify-content: $statistic-justify;
|
||||||
align-items: center ;
|
align-items: $statistic-align;
|
||||||
|
color: $--color-text-primary;
|
||||||
.number {
|
.number {
|
||||||
font-size: 20px;
|
font-size: $--font-size-extra-large;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
}
|
}
|
||||||
span{ display: inline-block;
|
span {
|
||||||
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -486,7 +486,7 @@
|
||||||
background: #FAFAFA;
|
background: #FAFAFA;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.current-row td.el-table__cell {
|
&.current-row td.el-table__cell, &.selection-row td.el-table__cell {
|
||||||
background-color: $--table-current-row-background-color;
|
background-color: $--table-current-row-background-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -496,7 +496,7 @@
|
||||||
@include e(body) {
|
@include e(body) {
|
||||||
tr.hover-row {
|
tr.hover-row {
|
||||||
&, &.el-table__row--striped {
|
&, &.el-table__row--striped {
|
||||||
&, &.current-row {
|
&, &.current-row, &.selection-row {
|
||||||
> td.el-table__cell {
|
> td.el-table__cell {
|
||||||
background-color: $--table-row-hover-background-color;
|
background-color: $--table-row-hover-background-color;
|
||||||
}
|
}
|
||||||
|
|
@ -504,7 +504,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.current-row > td.el-table__cell {
|
tr.current-row > td.el-table__cell, tr.selection-row > td.el-table__cell {
|
||||||
background-color: $--table-current-row-background-color;
|
background-color: $--table-current-row-background-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,14 @@
|
||||||
import { once, on } from 'element-ui/src/utils/dom';
|
import { once, on } from 'element-ui/src/utils/dom';
|
||||||
|
import { isMac } from 'element-ui/src/utils/util';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
bind(el, binding, vnode) {
|
bind(el, binding, vnode) {
|
||||||
let interval = null;
|
let interval = null;
|
||||||
let startTime;
|
let startTime;
|
||||||
|
const maxIntervals = isMac() ? 100 : 200;
|
||||||
const handler = () => vnode.context[binding.expression].apply();
|
const handler = () => vnode.context[binding.expression].apply();
|
||||||
const clear = () => {
|
const clear = () => {
|
||||||
if (Date.now() - startTime < 100) {
|
if (Date.now() - startTime < maxIntervals) {
|
||||||
handler();
|
handler();
|
||||||
}
|
}
|
||||||
clearInterval(interval);
|
clearInterval(interval);
|
||||||
|
|
@ -18,7 +20,7 @@ export default {
|
||||||
startTime = Date.now();
|
startTime = Date.now();
|
||||||
once(document, 'mouseup', clear);
|
once(document, 'mouseup', clear);
|
||||||
clearInterval(interval);
|
clearInterval(interval);
|
||||||
interval = setInterval(handler, 100);
|
interval = setInterval(handler, maxIntervals);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -212,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
version: '2.15.12',
|
version: '2.15.14',
|
||||||
locale: locale.use,
|
locale: locale.use,
|
||||||
i18n: locale.i18n,
|
i18n: locale.i18n,
|
||||||
install,
|
install,
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ export default {
|
||||||
el: {
|
el: {
|
||||||
colorpicker: {
|
colorpicker: {
|
||||||
confirm: 'Confirmar',
|
confirm: 'Confirmar',
|
||||||
clear: 'Despejar'
|
clear: 'Limpiar'
|
||||||
},
|
},
|
||||||
datepicker: {
|
datepicker: {
|
||||||
now: 'Ahora',
|
now: 'Ahora',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
export default {
|
||||||
|
el: {
|
||||||
|
colorpicker: {
|
||||||
|
confirm: 'OK',
|
||||||
|
clear: 'Poništi'
|
||||||
|
},
|
||||||
|
datepicker: {
|
||||||
|
now: 'Sad',
|
||||||
|
today: 'Danas',
|
||||||
|
cancel: 'Otkaži',
|
||||||
|
clear: 'Briši',
|
||||||
|
confirm: 'OK',
|
||||||
|
selectDate: 'Izaberi datum',
|
||||||
|
selectTime: 'Izaberi vreme',
|
||||||
|
startDate: 'Datum početka',
|
||||||
|
startTime: 'Vreme početka',
|
||||||
|
endDate: 'Datum završetka',
|
||||||
|
endTime: 'Vreme završetka',
|
||||||
|
prevYear: 'Prethodna godina',
|
||||||
|
nextYear: 'Sledeća godina',
|
||||||
|
prevMonth: 'Prethodni mesec',
|
||||||
|
nextMonth: 'Sledeći mesec',
|
||||||
|
year: 'godina',
|
||||||
|
month1: 'januar',
|
||||||
|
month2: 'februar',
|
||||||
|
month3: 'mart',
|
||||||
|
month4: 'april',
|
||||||
|
month5: 'maj',
|
||||||
|
month6: 'jun',
|
||||||
|
month7: 'jul',
|
||||||
|
month8: 'avgust',
|
||||||
|
month9: 'septembar',
|
||||||
|
month10: 'oktobar',
|
||||||
|
month11: 'novembar',
|
||||||
|
month12: 'decembar',
|
||||||
|
week: 'sedmica',
|
||||||
|
weeks: {
|
||||||
|
sun: 'Ned',
|
||||||
|
mon: 'Pon',
|
||||||
|
tue: 'Uto',
|
||||||
|
wed: 'Sre',
|
||||||
|
thu: 'Čet',
|
||||||
|
fri: 'Pet',
|
||||||
|
sat: 'Sub'
|
||||||
|
},
|
||||||
|
months: {
|
||||||
|
jan: 'jan',
|
||||||
|
feb: 'feb',
|
||||||
|
mar: 'mar',
|
||||||
|
apr: 'apr',
|
||||||
|
may: 'maj',
|
||||||
|
jun: 'jun',
|
||||||
|
jul: 'jul',
|
||||||
|
aug: 'avg',
|
||||||
|
sep: 'sep',
|
||||||
|
oct: 'okt',
|
||||||
|
nov: 'nov',
|
||||||
|
dec: 'dev'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
loading: 'Učitavanje',
|
||||||
|
noMatch: 'Nema rezultata',
|
||||||
|
noData: 'Nema podataka',
|
||||||
|
placeholder: 'Izaberi'
|
||||||
|
},
|
||||||
|
cascader: {
|
||||||
|
noMatch: 'Nema rezultata',
|
||||||
|
loading: 'Učitavanje',
|
||||||
|
placeholder: 'Izaberi',
|
||||||
|
noData: 'Nema podataka'
|
||||||
|
},
|
||||||
|
pagination: {
|
||||||
|
goto: 'Idi na',
|
||||||
|
pagesize: '/strani',
|
||||||
|
total: 'Ukupno {total}',
|
||||||
|
pageClassifier: ''
|
||||||
|
},
|
||||||
|
messagebox: {
|
||||||
|
title: 'Poruka',
|
||||||
|
confirm: 'OK',
|
||||||
|
cancel: 'Otkaži',
|
||||||
|
error: 'Neisravan unos'
|
||||||
|
},
|
||||||
|
upload: {
|
||||||
|
deleteTip: 'pritisni BRIŠI da obrišeš',
|
||||||
|
delete: 'Briši',
|
||||||
|
preview: 'Vidi',
|
||||||
|
continue: 'Nastavi'
|
||||||
|
},
|
||||||
|
table: {
|
||||||
|
emptyText: 'Nema podataka',
|
||||||
|
confirmFilter: 'Potvrdi',
|
||||||
|
resetFilter: 'Resetuj',
|
||||||
|
clearFilter: 'Sve',
|
||||||
|
sumText: 'Zbir'
|
||||||
|
},
|
||||||
|
tree: {
|
||||||
|
emptyText: 'Nema podataka'
|
||||||
|
},
|
||||||
|
transfer: {
|
||||||
|
noMatch: 'Nema rezultata',
|
||||||
|
noData: 'Nema podataka',
|
||||||
|
titles: ['Lista 1', 'Lista 2'],
|
||||||
|
filterPlaceholder: 'Unesi ključnu reč',
|
||||||
|
noCheckedFormat: '{total} stavki',
|
||||||
|
hasCheckedFormat: '{checked}/{total} obeleženih'
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
error: 'NEUSPEŠNO'
|
||||||
|
},
|
||||||
|
pageHeader: {
|
||||||
|
title: 'Nazad'
|
||||||
|
},
|
||||||
|
popconfirm: {
|
||||||
|
confirmButtonText: 'Da',
|
||||||
|
cancelButtonText: 'Ne'
|
||||||
|
},
|
||||||
|
empty: {
|
||||||
|
description: 'Nema podataka'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -62,7 +62,7 @@ export default {
|
||||||
loading: 'Yuklanmoqda',
|
loading: 'Yuklanmoqda',
|
||||||
noMatch: 'Mos maʼlumot yoʻq',
|
noMatch: 'Mos maʼlumot yoʻq',
|
||||||
noData: 'Maʼlumot yoʻq',
|
noData: 'Maʼlumot yoʻq',
|
||||||
placeholder: 'Tanladizngiz'
|
placeholder: 'Tanlang'
|
||||||
},
|
},
|
||||||
cascader: {
|
cascader: {
|
||||||
noMatch: 'Mos maʼlumot topilmadi',
|
noMatch: 'Mos maʼlumot topilmadi',
|
||||||
|
|
@ -85,8 +85,8 @@ export default {
|
||||||
upload: {
|
upload: {
|
||||||
deleteTip: 'Oʻchirish tugmasini bosib oʻchiring',
|
deleteTip: 'Oʻchirish tugmasini bosib oʻchiring',
|
||||||
delete: 'Oʻchirish',
|
delete: 'Oʻchirish',
|
||||||
preview: 'Oldin koʻrish',
|
preview: 'Oldindan koʻrish',
|
||||||
continue: 'Davom qilish'
|
continue: 'Davom etish'
|
||||||
},
|
},
|
||||||
table: {
|
table: {
|
||||||
emptyText: 'Boʻsh',
|
emptyText: 'Boʻsh',
|
||||||
|
|
@ -113,8 +113,8 @@ export default {
|
||||||
title: 'Orqaga'
|
title: 'Orqaga'
|
||||||
},
|
},
|
||||||
popconfirm: {
|
popconfirm: {
|
||||||
confirmButtonText: 'Yes', // to be translated
|
confirmButtonText: 'Tasdiqlash',
|
||||||
cancelButtonText: 'No' // to be translated
|
cancelButtonText: 'Bekor qilish'
|
||||||
},
|
},
|
||||||
empty: {
|
empty: {
|
||||||
description: 'Boʻsh'
|
description: 'Boʻsh'
|
||||||
|
|
|
||||||
|
|
@ -239,3 +239,7 @@ export function objToArray(obj) {
|
||||||
}
|
}
|
||||||
return isEmpty(obj) ? [] : [obj];
|
return isEmpty(obj) ? [] : [obj];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const isMac = function() {
|
||||||
|
return !Vue.prototype.$isServer && /macintosh|mac os x/i.test(navigator.userAgent);
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
Subproject commit 2a8ac9bc83472e13f0325d13db686fc50739d187
|
||||||
|
|
@ -1,352 +1,3 @@
|
||||||
|
|
||||||
import Vue, { PluginObject } from 'vue'
|
|
||||||
import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
|
|
||||||
|
|
||||||
import { ElAlert } from './alert'
|
|
||||||
import { ElAside } from './aside'
|
|
||||||
import { ElAutocomplete } from './autocomplete'
|
|
||||||
import { ElBadge } from './badge'
|
|
||||||
import { ElBreadcrumb } from './breadcrumb'
|
|
||||||
import { ElBreadcrumbItem } from './breadcrumb-item'
|
|
||||||
import { ElButton } from './button'
|
|
||||||
import { ElButtonGroup } from './button-group'
|
|
||||||
import { ElCard } from './card'
|
|
||||||
import { ElCarousel } from './carousel'
|
|
||||||
import { ElCarouselItem } from './carousel-item'
|
|
||||||
import { ElCascader } from './cascader'
|
|
||||||
import { ElCheckbox } from './checkbox'
|
|
||||||
import { ElCheckboxButton } from './checkbox-button'
|
|
||||||
import { ElCheckboxGroup } from './checkbox-group'
|
|
||||||
import { ElCol } from './col'
|
|
||||||
import { ElCollapse } from './collapse'
|
|
||||||
import { ElCollapseItem } from './collapse-item'
|
|
||||||
import { ElColorPicker } from './color-picker'
|
|
||||||
import { ElContainer } from './container'
|
|
||||||
import { ElDatePicker } from './date-picker'
|
|
||||||
import { ElDialog } from './dialog'
|
|
||||||
import { ElDropdown } from './dropdown'
|
|
||||||
import { ElDropdownItem } from './dropdown-item'
|
|
||||||
import { ElDropdownMenu } from './dropdown-menu'
|
|
||||||
import { ElFooter } from './footer'
|
|
||||||
import { ElForm } from './form'
|
|
||||||
import { ElFormItem } from './form-item'
|
|
||||||
import { ElHeader } from './header'
|
|
||||||
import { ElInput } from './input'
|
|
||||||
import { ElInputNumber } from './input-number'
|
|
||||||
import { ElLoading } from './loading'
|
|
||||||
import { ElMain } from './main'
|
|
||||||
import { ElMenu } from './menu'
|
|
||||||
import { ElMenuItem } from './menu-item'
|
|
||||||
import { ElMenuItemGroup } from './menu-item-group'
|
|
||||||
import { ElMessage } from './message'
|
|
||||||
import { ElMessageBox } from './message-box'
|
|
||||||
import { ElNotification } from './notification'
|
|
||||||
import { ElOption } from './option'
|
|
||||||
import { ElOptionGroup } from './option-group'
|
|
||||||
import { ElPagination } from './pagination'
|
|
||||||
import { ElPopover } from './popover'
|
|
||||||
import { ElProgress } from './progress'
|
|
||||||
import { ElRate } from './rate'
|
|
||||||
import { ElRadio } from './radio'
|
|
||||||
import { ElRadioButton } from './radio-button'
|
|
||||||
import { ElRadioGroup } from './radio-group'
|
|
||||||
import { ElRow } from './row'
|
|
||||||
import { ElSelect } from './select'
|
|
||||||
import { ElSlider } from './slider'
|
|
||||||
import { ElStep } from './step'
|
|
||||||
import { ElSteps } from './steps'
|
|
||||||
import { ElSubmenu } from './submenu'
|
|
||||||
import { ElSwitch } from './switch'
|
|
||||||
import { ElTable } from './table'
|
|
||||||
import { ElTableColumn } from './table-column'
|
|
||||||
import { ElTag } from './tag'
|
|
||||||
import { ElTabs } from './tabs'
|
|
||||||
import { ElTabPane } from './tab-pane'
|
|
||||||
import { ElTimeline } from './timeline'
|
|
||||||
import { ElTimelineItem } from './timeline-item'
|
|
||||||
import { ElTimePicker } from './time-picker'
|
|
||||||
import { ElTimeSelect } from './time-select'
|
|
||||||
import { ElTooltip } from './tooltip'
|
|
||||||
import { ElTransfer } from './transfer'
|
|
||||||
import { ElTree, TreeData } from './tree'
|
|
||||||
import { ElUpload } from './upload'
|
|
||||||
import { ElLink } from './link'
|
|
||||||
import { ElDivider } from './divider'
|
|
||||||
import { ElIcon } from './icon'
|
|
||||||
import { ElCalendar } from './calendar'
|
|
||||||
import { ElImage } from './image'
|
|
||||||
import { ElBacktop } from './backtop'
|
|
||||||
import { ElInfiniteScroll } from './infinite-scroll'
|
|
||||||
import { ElPageHeader } from './page-header'
|
|
||||||
import { ElAvatar } from './avatar'
|
|
||||||
import { ElDrawer } from './drawer'
|
|
||||||
|
|
||||||
import { ElStatistic } from './statistic'
|
|
||||||
|
|
||||||
export interface InstallationOptions {
|
|
||||||
locale: any,
|
|
||||||
i18n: any,
|
|
||||||
size: string
|
|
||||||
}
|
|
||||||
|
|
||||||
/** The version of element-ui */
|
|
||||||
export const version: string
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Install all element-ui components into Vue.
|
|
||||||
* Please do not invoke this method directly.
|
|
||||||
* Call `Vue.use(ElementUI)` to install.
|
|
||||||
*/
|
|
||||||
export function install (vue: typeof Vue, options: InstallationOptions): void
|
|
||||||
|
|
||||||
/** ElementUI component common definition */
|
|
||||||
export type Component = ElementUIComponent
|
|
||||||
|
|
||||||
/** Component size definition for button, input, etc */
|
|
||||||
export type ComponentSize = ElementUIComponentSize
|
|
||||||
|
|
||||||
/** Horizontal alignment */
|
|
||||||
export type HorizontalAlignment = ElementUIHorizontalAlignment
|
|
||||||
|
|
||||||
/** Show animation while loading data */
|
|
||||||
export const Loading: ElLoading
|
|
||||||
|
|
||||||
/** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */
|
|
||||||
export const Message: ElMessage
|
|
||||||
|
|
||||||
/** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */
|
|
||||||
export const MessageBox: ElMessageBox
|
|
||||||
|
|
||||||
/** Displays a global notification message at the upper right corner of the page */
|
|
||||||
export const Notification: ElNotification
|
|
||||||
|
|
||||||
// TS cannot merge imported class with namespace, so declare subclasses instead
|
|
||||||
|
|
||||||
/** Alert Component */
|
|
||||||
export class Alert extends ElAlert {}
|
|
||||||
|
|
||||||
/** Aside Component */
|
|
||||||
export class Aside extends ElAside {}
|
|
||||||
|
|
||||||
/** Autocomplete Component */
|
|
||||||
export class Autocomplete extends ElAutocomplete {}
|
|
||||||
|
|
||||||
/** Bagde Component */
|
|
||||||
export class Badge extends ElBadge {}
|
|
||||||
|
|
||||||
/** Breadcrumb Component */
|
|
||||||
export class Breadcrumb extends ElBreadcrumb {}
|
|
||||||
|
|
||||||
/** Breadcrumb Item Component */
|
|
||||||
export class BreadcrumbItem extends ElBreadcrumbItem {}
|
|
||||||
|
|
||||||
/** Button Component */
|
|
||||||
export class Button extends ElButton {}
|
|
||||||
|
|
||||||
/** Button Group Component */
|
|
||||||
export class ButtonGroup extends ElButtonGroup {}
|
|
||||||
|
|
||||||
/** Card Component */
|
|
||||||
export class Card extends ElCard {}
|
|
||||||
|
|
||||||
/** Cascader Component */
|
|
||||||
export class Cascader extends ElCascader {}
|
|
||||||
|
|
||||||
/** Carousel Component */
|
|
||||||
export class Carousel extends ElCarousel {}
|
|
||||||
|
|
||||||
/** Carousel Item Component */
|
|
||||||
export class CarouselItem extends ElCarouselItem {}
|
|
||||||
|
|
||||||
/** Checkbox Component */
|
|
||||||
export class Checkbox extends ElCheckbox {}
|
|
||||||
|
|
||||||
/** Checkbox Button Component */
|
|
||||||
export class CheckboxButton extends ElCheckboxButton {}
|
|
||||||
|
|
||||||
/** Checkbox Group Component */
|
|
||||||
export class CheckboxGroup extends ElCheckboxGroup {}
|
|
||||||
|
|
||||||
/** Colunm Layout Component */
|
|
||||||
export class Col extends ElCol {}
|
|
||||||
|
|
||||||
/** Collapse Component */
|
|
||||||
export class Collapse extends ElCollapse {}
|
|
||||||
|
|
||||||
/** Collapse Item Component */
|
|
||||||
export class CollapseItem extends ElCollapseItem {}
|
|
||||||
|
|
||||||
/** Color Picker Component */
|
|
||||||
export class ColorPicker extends ElColorPicker {}
|
|
||||||
|
|
||||||
/** Container Component */
|
|
||||||
export class Container extends ElContainer {}
|
|
||||||
|
|
||||||
/** Date Picker Component */
|
|
||||||
export class DatePicker extends ElDatePicker {}
|
|
||||||
|
|
||||||
/** Dialog Component */
|
|
||||||
export class Dialog extends ElDialog {}
|
|
||||||
|
|
||||||
/** Dropdown Component */
|
|
||||||
export class Dropdown extends ElDropdown {}
|
|
||||||
|
|
||||||
/** Dropdown Item Component */
|
|
||||||
export class DropdownItem extends ElDropdownItem {}
|
|
||||||
|
|
||||||
/** Dropdown Menu Component */
|
|
||||||
export class DropdownMenu extends ElDropdownMenu {}
|
|
||||||
|
|
||||||
/** Footer Component */
|
|
||||||
export class Footer extends ElFooter {}
|
|
||||||
|
|
||||||
/** Form Component */
|
|
||||||
export class Form extends ElForm {}
|
|
||||||
|
|
||||||
/** Form Item Component */
|
|
||||||
export class FormItem extends ElFormItem {}
|
|
||||||
|
|
||||||
/** Header Component */
|
|
||||||
export class Header extends ElHeader {}
|
|
||||||
|
|
||||||
/** Input Component */
|
|
||||||
export class Input extends ElInput {}
|
|
||||||
|
|
||||||
/** Input Number Component */
|
|
||||||
export class InputNumber extends ElInputNumber {}
|
|
||||||
|
|
||||||
/** Main Component */
|
|
||||||
export class Main extends ElMain {}
|
|
||||||
|
|
||||||
/** Menu that provides navigation for your website */
|
|
||||||
export class Menu extends ElMenu {}
|
|
||||||
|
|
||||||
/** Menu Item Component */
|
|
||||||
export class MenuItem extends ElMenuItem {}
|
|
||||||
|
|
||||||
/** Menu Item Group Component */
|
|
||||||
export class MenuItemGroup extends ElMenuItemGroup {}
|
|
||||||
|
|
||||||
/** Dropdown Select Option Component */
|
|
||||||
export class Option extends ElOption {}
|
|
||||||
|
|
||||||
/** Dropdown Select Option Group Component */
|
|
||||||
export class OptionGroup extends ElOptionGroup {}
|
|
||||||
|
|
||||||
/** Pagination Component */
|
|
||||||
export class Pagination extends ElPagination {}
|
|
||||||
|
|
||||||
/** Popover Component */
|
|
||||||
export class Popover extends ElPopover {}
|
|
||||||
|
|
||||||
/** Progress Component */
|
|
||||||
export class Progress extends ElProgress {}
|
|
||||||
|
|
||||||
/** Rate Component */
|
|
||||||
export class Rate extends ElRate {}
|
|
||||||
|
|
||||||
/** Radio Component */
|
|
||||||
export class Radio extends ElRadio {}
|
|
||||||
|
|
||||||
/** Radio Button Component */
|
|
||||||
export class RadioButton extends ElRadioButton {}
|
|
||||||
|
|
||||||
/** Radio Group Component */
|
|
||||||
export class RadioGroup extends ElRadioGroup {}
|
|
||||||
|
|
||||||
/** Row Layout Component */
|
|
||||||
export class Row extends ElRow {}
|
|
||||||
|
|
||||||
/** Dropdown Select Component */
|
|
||||||
export class Select extends ElSelect {}
|
|
||||||
|
|
||||||
/** Slider Component */
|
|
||||||
export class Slider extends ElSlider {}
|
|
||||||
|
|
||||||
/** Step Component */
|
|
||||||
export class Step extends ElStep {}
|
|
||||||
|
|
||||||
/** Steps Component */
|
|
||||||
export class Steps extends ElSteps {}
|
|
||||||
|
|
||||||
/** Submenu Component */
|
|
||||||
export class Submenu extends ElSubmenu {}
|
|
||||||
|
|
||||||
/** Switch Component */
|
|
||||||
export class Switch extends ElSwitch {}
|
|
||||||
|
|
||||||
/** Table Component */
|
|
||||||
export class Table extends ElTable {}
|
|
||||||
|
|
||||||
/** Table Column Component */
|
|
||||||
export class TableColumn extends ElTableColumn {}
|
|
||||||
|
|
||||||
/** Tabs Component */
|
|
||||||
export class Tabs extends ElTabs {}
|
|
||||||
|
|
||||||
/** Tab Pane Component */
|
|
||||||
export class TabPane extends ElTabPane {}
|
|
||||||
|
|
||||||
/** Tag Component */
|
|
||||||
export class Tag extends ElTag {}
|
|
||||||
|
|
||||||
/** Timeline Component */
|
|
||||||
export class Timeline extends ElTimeline {}
|
|
||||||
|
|
||||||
/** Timeline Item Component */
|
|
||||||
export class TimelineItem extends ElTimelineItem {}
|
|
||||||
|
|
||||||
/** TimePicker Component */
|
|
||||||
export class TimePicker extends ElTimePicker {}
|
|
||||||
|
|
||||||
/** TimeSelect Component */
|
|
||||||
export class TimeSelect extends ElTimeSelect {}
|
|
||||||
|
|
||||||
/** Tooltip Component */
|
|
||||||
export class Tooltip extends ElTooltip {}
|
|
||||||
|
|
||||||
/** Transfer Component */
|
|
||||||
export class Transfer extends ElTransfer {}
|
|
||||||
|
|
||||||
/** Tree Component */
|
|
||||||
export class Tree<K = any, D = TreeData> extends ElTree<K, D> {}
|
|
||||||
|
|
||||||
/** Upload Component */
|
|
||||||
export class Upload extends ElUpload {}
|
|
||||||
|
|
||||||
/** Divider Component */
|
|
||||||
export class Divider extends ElDivider {}
|
|
||||||
|
|
||||||
/** Link Component */
|
|
||||||
export class Link extends ElLink {}
|
|
||||||
|
|
||||||
/** Image Component */
|
|
||||||
export class Image extends ElImage {}
|
|
||||||
|
|
||||||
/** Icon Component */
|
|
||||||
export class Icon extends ElIcon {}
|
|
||||||
|
|
||||||
/** Calendar Component */
|
|
||||||
export class Calendar extends ElCalendar {}
|
|
||||||
|
|
||||||
/** Backtop Component */
|
|
||||||
export class Backtop extends ElBacktop {}
|
|
||||||
|
|
||||||
/** InfiniteScroll Directive */
|
|
||||||
export const InfiniteScroll: PluginObject<ElInfiniteScroll>;
|
|
||||||
|
|
||||||
/** PageHeader Component */
|
|
||||||
export class PageHeader extends ElPageHeader {}
|
|
||||||
|
|
||||||
/** Avatar Component */
|
|
||||||
export class Avatar extends ElAvatar {}
|
|
||||||
|
|
||||||
/** Drawer Component */
|
|
||||||
export class Drawer extends ElDrawer {}
|
|
||||||
|
|
||||||
/** Statistic Component */
|
|
||||||
export class Statistic extends ElStatistic {}
|
|
||||||
|
|
||||||
import Vue, { PluginObject } from 'vue'
|
import Vue, { PluginObject } from 'vue'
|
||||||
import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
|
import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
|
||||||
|
|
||||||
|
|
@ -437,6 +88,7 @@ import { ElSpinner } from './spinner'
|
||||||
import { ElDescriptions } from './descriptions'
|
import { ElDescriptions } from './descriptions'
|
||||||
import { ElDescriptionsItem } from './descriptions-item'
|
import { ElDescriptionsItem } from './descriptions-item'
|
||||||
import { ElResult } from './result'
|
import { ElResult } from './result'
|
||||||
|
import { ElStatistic } from './statistic'
|
||||||
|
|
||||||
export interface InstallationOptions {
|
export interface InstallationOptions {
|
||||||
locale: any,
|
locale: any,
|
||||||
|
|
@ -725,3 +377,6 @@ export class DescriptionsItem extends ElDescriptionsItem {}
|
||||||
|
|
||||||
/** Result Component */
|
/** Result Component */
|
||||||
export class Result extends ElResult {}
|
export class Result extends ElResult {}
|
||||||
|
|
||||||
|
/** Statistic Component */
|
||||||
|
export class Statistic extends ElStatistic {}
|
||||||
|
|
@ -38,4 +38,6 @@ export declare class ElImage extends ElementUIComponent {
|
||||||
previewSrcList: string[]
|
previewSrcList: string[]
|
||||||
|
|
||||||
zIndex: number
|
zIndex: number
|
||||||
|
|
||||||
|
initialIndex: number
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,24 +4,34 @@ import { ElementUIComponent } from './component'
|
||||||
export declare class ElStatistic extends ElementUIComponent {
|
export declare class ElStatistic extends ElementUIComponent {
|
||||||
/** Set the decimal point */
|
/** Set the decimal point */
|
||||||
decimalSeparator: string
|
decimalSeparator: string
|
||||||
|
|
||||||
/** Sets the thousandth identifier */
|
/** Sets the thousandth identifier */
|
||||||
groupSeparator: string
|
groupSeparator: string
|
||||||
|
|
||||||
/** numerical precision */
|
/** numerical precision */
|
||||||
precision: number
|
precision: number
|
||||||
|
|
||||||
/** Numerical content */
|
/** Numerical content */
|
||||||
value: string | number
|
value: string | number
|
||||||
|
|
||||||
/** Title of numerical value */
|
/** Title of numerical value */
|
||||||
title: string | number
|
title: string | number
|
||||||
|
|
||||||
/** Whether to enable the countdown function */
|
/** Whether to enable the countdown function */
|
||||||
timeIndices: boolean
|
timeIndices: boolean
|
||||||
|
|
||||||
/** Sets the style of the value */
|
/** Sets the style of the value */
|
||||||
valueStyle: object
|
valueStyle: object
|
||||||
|
|
||||||
/** Numeric content formatting countdown display */
|
/** Numeric content formatting countdown display */
|
||||||
format: string
|
format: string
|
||||||
|
|
||||||
/** Set the ratio */
|
/** Set the ratio */
|
||||||
rate: number
|
rate: number
|
||||||
|
|
||||||
/** Set the suffix of the value */
|
/** Set the suffix of the value */
|
||||||
suffix: string
|
suffix: string
|
||||||
|
|
||||||
/** Set the prefix of the value */
|
/** Set the prefix of the value */
|
||||||
prefix: string
|
prefix: string
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -63,6 +63,9 @@ export declare class ElTable extends ElementUIComponent {
|
||||||
/** Whether current row is highlighted */
|
/** Whether current row is highlighted */
|
||||||
highlightCurrentRow: boolean
|
highlightCurrentRow: boolean
|
||||||
|
|
||||||
|
/** Whether selection row is highlighted */
|
||||||
|
highlightSelectionRow: boolean
|
||||||
|
|
||||||
/** Key of current row, a set only prop */
|
/** Key of current row, a set only prop */
|
||||||
currentRowKey: string | number
|
currentRowKey: string | number
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -371,7 +371,7 @@
|
||||||
{
|
{
|
||||||
"name": "type",
|
"name": "type",
|
||||||
"description": "Button type",
|
"description": "Button type",
|
||||||
"type": "'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text"
|
"type": "'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "plain",
|
"name": "plain",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue