Skip to content

E
Element
Commit bd56221e authored by yang's avatar yang Committed by GitHub
Browse files
Options

chore: add new component statistics (#22159) 

* statistic：新增statistic组件，用于数值展示和倒计时
Co-authored-by: default avataryang <29636098325@qq.com>
parent 490bcba1
Hide whitespace changes
Inline Side-by-side
Showing with 1699 additions and 378 deletions
README.md
View file @ bd56221e
<p align="center"> <p align="center">
<img src="https://cdn.rawgit.com/ElemeFE/element/dev/element_logo.svg"> <img src="https://cdn.rawgit.com/ElemeFE/element/dev/element_logo.svg">
1212
</p> </p>
<p align="center"> <p align="center">
......
components.json
View file @ bd56221e
...@@ -80,6 +80,7 @@ ...@@ -80,6 +80,7 @@
"cascader-panel": "./packages/cascader-panel/index.js", "cascader-panel": "./packages/cascader-panel/index.js",
"avatar": "./packages/avatar/index.js", "avatar": "./packages/avatar/index.js",
"drawer": "./packages/drawer/index.js", "drawer": "./packages/drawer/index.js",
"statistic": "./packages/statistic/index.js"
"popconfirm": "./packages/popconfirm/index.js", "popconfirm": "./packages/popconfirm/index.js",
"skeleton": "./packages/skeleton/index.js", "skeleton": "./packages/skeleton/index.js",
"skeleton-item": "./packages/skeleton-item/index.js", "skeleton-item": "./packages/skeleton-item/index.js",
......
examples/docs/en-US/statistic.md 0 → 100644
View file @ bd56221e
## Statistic
Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.
Countdown mode
### Basic usage
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
:::demo
```html
<template>
<div >
<el-row :gutter="20">
<el-col :span="6">
<div>
<el-statistic groupSeparator="," :precision="2" :value="value2" :title="title"></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="Gender Distribution">
<template slot="formatter">
456/2
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic groupSeparator="," :precision="2" decimalSeparator="." :value="value1" :title="title">
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
<template slot="suffix">
<i class="el-icon-s-flag" style="color: blue"></i>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic :value="like ? 521 : 520" title="Feedback">
<template slot="suffix">
<span @click="like = !like" class="like">
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span> </template>
</el-statistic>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
like: true,
value1: 4154.564,
value2: 2222,
title: "Growth this year",
input: "Hello Element UI!",
};
},
};
</script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
```
:::
### 倒计时
:::warning
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown
:::
:::demo Providing a future time via 'value' will enable the countdown function
```html
<template>
<div >
<el-row :gutter="20">
<el-col :span="14">
<div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" timeIndices title="商品降价">
<template slot="suffix">
The rush is about to begin
</template>
</el-statistic>
</div>
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
<el-statistic @finish="hilarity" :value="deadline3" timeIndices title="The Value of Time">
<template slot="suffix">
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="10">
<el-card shadow="hover" style="width: 100%;">
<div slot="header" class="clearfix">
<span>文嘉《明日歌》</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
</div>
<div style="font-size: 18px;text-align: center; " >明日复明日</div>
<div style="font-size: 18px;text-align: center;" >明日何其多</div>
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
<div style="margin-top: 40px;"></div>
<el-statistic ref="statistic" @finish="hilarity" :value="deadline4" title="Distance to Tomorrow:" timeIndices > </el-statistic>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
format:'HH小时:mm:ss:SSS',
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
deadline2: Date.now() + 1000 * 60 * 60 * 8,
deadline3: Date.now() + 1000 * 60 *30,
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
};
},
methods: {
hilarity() {
this.$notify({
title: 'Prompt',
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
duration: 0
});
},
clickFn(){
this.$refs.statistic.suspend( this.stop)
this.stop=!this.stop
},
add(){
this.deadline3= this.deadline3+ 1000 * 10
}
}
};
</script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
```
:::
### Statistic Attributes
| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | Numerical content | string \| number | - | - |
| decimalSeparator | Setting the decimal point | string | - | . |
| formatter | Custom numerical presentation| v-slot \|({value}) => VNode | - | - |
| groupSeparator | Sets the thousandth identifier | string | - | , |
| precision | numerical precision | number | - | 0 |
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
| suffix |Sets the suffix of a number | string \| v-slot | - | - |
| title | Numeric titles | string \| v-slot | - | - |
| valueStyle | Styles numeric values | style | - | - |
| rate | Set the ratio | number | - | 1000 |
### Statistic Slots
| Name | Description |
|------|--------|
| prefix | Numeric prefix |
| suffix | Suffixes for numeric values |
| formatter | Numerical content |
| title | Numeric titles |
### Statistic.Countdown Attributes
| Attribute | Description | Type | Options | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| timeIndices | Whether to enable the countdown function | boolean | true\|false | false |
| value | Required value, enter the bound value | string | — | — |
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
### Statistic.Countdown Events
| Method | Description | Parameters |
|---------|--------|---------|
| change | Enable in the 'countdown' function | (value: Date) |
| finish | Launched after the 'countdown' is complete | (value: boolean) |
### Statistic Methods
| Method | Description | Parameters |CallBack|
| ---- | ---- | ---- |---- |
| suspend | Pause the countdown|(value:boolean) |(value: Date) |
examples/docs/es/statistic.md 0 → 100644
View file @ bd56221e
## Statistic
Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.
Countdown mode
### Basic usage
The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
:::demo
```html
<template>
<div >
<el-row :gutter="20">
<el-col :span="6">
<div>
<el-statistic groupSeparator="," :precision="2" :value="value2" :title="title"></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="Gender Distribution">
<template slot="formatter">
456/2
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic groupSeparator="," :precision="2" decimalSeparator="." :value="value1" :title="title">
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
<template slot="suffix">
<i class="el-icon-s-flag" style="color: blue"></i>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic :value="like ? 521 : 520" title="Feedback">
<template slot="suffix">
<span @click="like = !like" class="like">
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span> </template>
</el-statistic>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
like: true,
value1: 4154.564,
value2: 2222,
title: "Growth this year",
input: "Hello Element UI!",
};
},
};
</script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
```
:::
### 倒计时
:::warning
Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown
:::
:::demo Providing a future time via 'value' will enable the countdown function
```html
<template>
<div >
<el-row :gutter="20">
<el-col :span="14">
<div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" timeIndices title="商品降价">
<template slot="suffix">
The rush is about to begin
</template>
</el-statistic>
</div>
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
<el-statistic @finish="hilarity" :value="deadline3" timeIndices title="The Value of Time">
<template slot="suffix">
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="10">
<el-card shadow="hover" style="width: 100%;">
<div slot="header" class="clearfix">
<span>文嘉《明日歌》</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
</div>
<div style="font-size: 18px;text-align: center; " >明日复明日</div>
<div style="font-size: 18px;text-align: center;" >明日何其多</div>
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
<div style="margin-top: 40px;"></div>
<el-statistic ref="statistic" @finish="hilarity" :value="deadline4" title="Distance to Tomorrow:" timeIndices > </el-statistic>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
format:'HH小时:mm:ss:SSS',
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
deadline2: Date.now() + 1000 * 60 * 60 * 8,
deadline3: Date.now() + 1000 * 60 *30,
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
};
},
methods: {
hilarity() {
this.$notify({
title: 'Prompt',
message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
duration: 0
});
},
clickFn(){
this.$refs.statistic.suspend( this.stop)
this.stop=!this.stop
},
add(){
this.deadline3= this.deadline3+ 1000 * 10
}
}
};
</script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
```
:::
### Statistic Attributes
| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | Numerical content | string \| number | - | - |
| decimalSeparator | Setting the decimal point | string | - | . |
| formatter | Custom numerical presentation| v-slot \|({value}) => VNode | - | - |
| groupSeparator | Sets the thousandth identifier | string | - | , |
| precision | numerical precision | number | - | 0 |
| prefix | Sets the prefix of a number | string \| v-slot | - | - |
| suffix |Sets the suffix of a number | string \| v-slot | - | - |
| title | Numeric titles | string \| v-slot | - | - |
| valueStyle | Styles numeric values | style | - | - |
| rate | Set the ratio | number | - | 1000 |
### Statistic Slots
| Name | Description |
|------|--------|
| prefix | Numeric prefix |
| suffix | Suffixes for numeric values |
| formatter | Numerical content |
| title | Numeric titles |
### Statistic.Countdown Attributes
| Attribute | Description | Type | Options | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| timeIndices | Whether to enable the countdown function | boolean | true\|false | false |
| value | Required value, enter the bound value | string | — | — |
| format | Formatting the countdown display | string | — | 'HH:mm:ss' |
### Statistic.Countdown Events
| Method | Description | Parameters |
|---------|--------|---------|
| change | Enable in the 'countdown' function | (value: Date) |
| finish | Launched after the 'countdown' is complete | (value: boolean) |
### Statistic Methods
| Method | Description | Parameters |CallBack|
| ---- | ---- | ---- |---- |
| suspend | Pause the countdown|(value:boolean) |(value: Date) |
examples/docs/zh-CN/statistic.md 0 → 100644
View file @ bd56221e
## Statistic 统计数值
用于突出某个或某组数字时，如显示数值，如金额，排名等。
倒计时模式
### 基础用法
组件提供千分位的展示，不过可以通过rate来设置相应万分位等
:::demo
```html
<template>
<div >
<el-row :gutter="20">
<el-col :span="6">
<div>
<el-statistic groupSeparator="," :precision="2" :value="value2" :title="title"></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="男女比">
<template slot="formatter">
456/2
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic groupSeparator="," :precision="2" decimalSeparator="." :value="value1" :title="title">
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
<template slot="suffix">
<i class="el-icon-s-flag" style="color: blue"></i>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic :value="like ? 521 : 520" title="Feedback">
<template slot="suffix">
<span @click="like = !like" class="like">
<i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span> </template>
</el-statistic>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
like: true,
value1: 4154.564,
value2: 2222,
title: "今年的增长",
input: "Hello Element UI!",
};
},
};
</script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
```
:::
### 倒计时
:::warning
suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为value指向的是未来的时间节点**。
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
:::
:::demo 通过 `value` 提供未来的时间，将开启倒计时功能
```html
<template>
<div >
<el-row :gutter="20">
<el-col :span="14">
<div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" timeIndices title="商品降价">
<template slot="suffix">
抢购即将开始
</template>
</el-statistic>
</div>
<div style="width: 100%; display: inline-block; margin-top: 50px; ">
<el-statistic @finish="hilarity" :value="deadline3" timeIndices title="一寸光阴一寸金">
<template slot="suffix">
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="10">
<el-card shadow="hover" style="width: 100%;">
<div slot="header" class="clearfix">
<span>文嘉《明日歌》</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
</div>
<div style="font-size: 18px;text-align: center; " >明日复明日</div>
<div style="font-size: 18px;text-align: center;" >明日何其多</div>
<div style="font-size: 18px;text-align: center;" >我生待明日</div>
<div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
<div style="margin-top: 40px;"></div>
<el-statistic ref="statistic" @finish="hilarity" :value="deadline4" title="距离明日：" timeIndices > </el-statistic>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
format:'HH小时:mm:ss:SSS',
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
deadline2: Date.now() + 1000 * 60 * 60 * 8,
deadline3: Date.now() + 1000 * 60 *30,
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
};
},
methods: {
hilarity() {
this.$notify({
title: '提示',
message: '时间已到，你可知寸金难买寸光阴？',
duration: 0
});
},
clickFn(){
this.$refs.statistic.suspend( this.stop)
this.stop=!this.stop
},
add(){
this.deadline3= this.deadline3+ 1000 * 10
}
}
};
</script>
<style lang="scss" >
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>
```
:::
### Statistic Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | 数值内容 | string \| number | - | - |
| decimalSeparator | 设置小数点 | string | - | . |
| formatter | 自定义数值展示| v-slot \|({value}) => VNode | - | - |
| groupSeparator | 设置千分位标识符 | string | - | , |
| precision | 数值精度 | number | - | 0 |
| prefix | 设置数值的前缀 | string \| v-slot | - | - |
| suffix |设置数值的后缀 | string \| v-slot | - | - |
| title | 数值的标题 | string \| v-slot | - | - |
| valueStyle | 设置数值的样式 | style | - | - |
| rate | 设置倍率 | number | - | 1000 |
### Statistic Slots
| name | 说明 |
|------|--------|
| prefix | 数值的前缀 |
| suffix | 数值的后缀 |
| formatter | 数值内容 |
| title | 数值的标题 |
### Statistic.Countdown Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| timeIndices | 是否开启倒计时功能 | boolean | true\|false | false |
| value | 必填值，输入绑定值 | string | — | — |
| format | 格式化倒计时展示 | string | — | 'HH:mm:ss' |
### Statistic.Countdown Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| change | 在`倒计时`的功能中开启 | (value: Date) |
| finish | 在`倒计时` 完成后启动 | (value: boolean) |
### Statistic Methods
| 方法名 | 说明 | 参数 |回调参数|
| ---- | ---- | ---- |---- |
| suspend | 暂停倒计时|(value:boolean) |(value: Date) |
examples/nav.config.json
View file @ bd56221e
...@@ -192,6 +192,10 @@ ...@@ -192,6 +192,10 @@
{ {
"path": "/result", "path": "/result",
"title": "Result 结果" "title": "Result 结果"
},
{
"path": "/statistic",
"title": "Statistic 统计数值"
} }
] ]
}, },
...@@ -621,6 +625,10 @@ ...@@ -621,6 +625,10 @@
{ {
"path": "/drawer", "path": "/drawer",
"title": "Drawer" "title": "Drawer"
},
{
"path": "/statistic",
"title": "Statistic"
} }
] ]
} }
...@@ -935,6 +943,10 @@ ...@@ -935,6 +943,10 @@
{ {
"path": "/drawer", "path": "/drawer",
"title": "Drawer" "title": "Drawer"
},
{
"path": "/statistic",
"title": "Statistic"
} }
] ]
} }
...@@ -1249,6 +1261,10 @@ ...@@ -1249,6 +1261,10 @@
{ {
"path": "/drawer", "path": "/drawer",
"title": "Drawer" "title": "Drawer"
},
{
"path": "/statistic",
"title": "Statistic"
} }
] ]
} }
......
packages/statistic/index.js 0 → 100644
View file @ bd56221e
import Statistic from './src/main';
/* istanbul ignore next */
Statistic.install = function(Vue) {
Vue.component(Statistic.name, Statistic);
};
export default Statistic;
packages/statistic/src/main.vue 0 → 100644
View file @ bd56221e
<template >
<div class="el-statistic">
<div class="head">
<slot name="title">
<span class="title">
{{ title }}
</span>
</slot>
</div>
<div class="con">
<span class="prefix">
<slot name="prefix">
{{ prefix }}
</slot>
</span>
<span class="number" :style="valueStyle">
<slot name="formatter"> {{ disposeValue }}</slot>
</span>
<span class="suffix">
<slot name="suffix">
{{ suffix }}
</slot>
</span>
</div>
</div>
</template>
<script>
import _ from 'lodash';
// const dayjs = require('dayjs');
export default {
name: 'ElStatistic',
data() {
return {
disposeValue: '',
timeTask: undefined,
REFRESH_INTERVAL: 1000 / 30
};
},
props: {
decimalSeparator: {
type: String,
default: '.'
},
groupSeparator: {
type: String,
default: ''
},
precision: {
type: Number,
default: 0
},
value: {
type: [String, Number],
default: ''
},
prefix: {
type: String,
default: ''
},
suffix: {
type: String,
default: ''
},
title: {
type: [String, Number],
default: ''
},
timeIndices: {
type: Boolean,
default: false
},
valueStyle: {
type: Object,
default: function() {
return {};
}
},
format: {
type: String,
default: 'HH:mm:ss:SSS'
},
rate: {
type: Number,
default: 1000
}
},
created() {
this.branch();
},
watch: {
value: function() {
this.branch();
}
},
methods: {
branch() {
// console.log('timeIndices', this.timeIndices);
if (this.timeIndices) {
clearInterval(this.timeTask);
this.countDown();
} else {
this.dispose();
}
},
magnification(num, mulriple = 1000, groupSeparator = ',') { // magnification factor
if (_.isNumber(num)) return false;
let result = String(_.divide(num, mulriple))
.split('.')
.join(groupSeparator || ',');
return result;
},
dispose() {
let { value, precision, groupSeparator, rate } = this;
if (!_.isNumber(value)) return false;
if (precision) {
value = _.ceil(value, precision);
}
let integer = String(value).split('.')[0];
let decimals = String(value).split('.')[1] || (precision ? _.fill(Array(precision), 0).join('') : '');
let result = 0;
// 1000 multiplying power
if (groupSeparator) {
integer = this.magnification(integer, rate, groupSeparator);
}
result = [integer, decimals].join(
decimals ? this.decimalSeparator || '.' : ''
);
this.disposeValue = result;
return result;
},
diffDate(minuend, subtrahend) {
return _.subtract(minuend, subtrahend);
},
suspend(isStop) {
if (isStop) {
clearInterval(this.timeTask);
} else {
this.branch();
}
return this.disposeValue;
},
countDown() {
let { format, value, REFRESH_INTERVAL, diffDate, suspend } = this;
let diffTiem = diffDate(value, Date.now());
let formatTimeStr = function(format, time) {
const timeUnits = [
['Y', 1000 * 60 * 60 * 24 * 365], // years
['M', 1000 * 60 * 60 * 24 * 30], // months
['D', 1000 * 60 * 60 * 24], // days
['H', 1000 * 60 * 60], // hours
['m', 1000 * 60], // minutes
['s', 1000], // seconds
['S', 1] // million seconds
];
return _.reduce(timeUnits, (con, item) => {
let name = item[0];
return con.replace(new RegExp(`${name}+`, 'g'), (match) => {
let sum = _.chain(time).divide(item[1]).floor().value();
time -= _.multiply(sum, item[1]);
sum = _.padStart(String(sum), String(match).length, 0); // autoCompletion
if (!sum)suspend();
return sum;
});
}, format);
};
let than = this;
let disappearTime = function(time) {
let result = true;// stop
if (value > Date.now()) {
than.$emit('change', time);
result = false;
} else {
result = true;
than.$emit('finish', true);
}
return (result);
};
this.timeTask = setInterval(function() {
// console.log(diffTiem);
if (disappearTime(diffTiem)) clearInterval(than.timeTask);
diffTiem = diffTiem < REFRESH_INTERVAL ? 0 : diffTiem - REFRESH_INTERVAL;
than.disposeValue = formatTimeStr(format, diffTiem);
}, REFRESH_INTERVAL);
}
}
};
</script>
packages/theme-chalk/src/index.scss
View file @ bd56221e
...@@ -77,6 +77,7 @@ ...@@ -77,6 +77,7 @@
@import "./cascader-panel.scss"; @import "./cascader-panel.scss";
@import "./avatar.scss"; @import "./avatar.scss";
@import "./drawer.scss"; @import "./drawer.scss";
@import "./statistic.scss";
@import "./popconfirm.scss"; @import "./popconfirm.scss";
@import "./skeleton.scss"; @import "./skeleton.scss";
@import "./skeleton-item.scss"; @import "./skeleton-item.scss";
...@@ -84,3 +85,4 @@ ...@@ -84,3 +85,4 @@
@import "./descriptions.scss"; @import "./descriptions.scss";
@import "./descriptions-item.scss"; @import "./descriptions-item.scss";
@import "./result.scss"; @import "./result.scss";
packages/theme-chalk/src/statistic.scss 0 → 100644
View file @ bd56221e
@import "mixins/mixins";
@import "common/var";
@include b(statistic) {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
color: $--color-black;
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5715;
list-style: none;
font-feature-settings: "tnum";
text-align: center;
.head {
margin-bottom: 4px;
color: #00000073;
font-size: 14px;
}
.con{
display: flex;
justify-content :center;
align-items: center ;
.number{
font-size: 20px;
padding: 0 4px;
}
span{ display: inline-block;
margin: 0;
line-height: 100%;
}
}
}
\ No newline at end of file
src/index.js
View file @ bd56221e
...@@ -81,6 +81,9 @@ import PageHeader from '../packages/page-header/index.js'; ...@@ -81,6 +81,9 @@ import PageHeader from '../packages/page-header/index.js';
import CascaderPanel from '../packages/cascader-panel/index.js'; import CascaderPanel from '../packages/cascader-panel/index.js';
import Avatar from '../packages/avatar/index.js'; import Avatar from '../packages/avatar/index.js';
import Drawer from '../packages/drawer/index.js'; import Drawer from '../packages/drawer/index.js';
import Statistic from '../packages/statistic/index.js';
import Popconfirm from '../packages/popconfirm/index.js'; import Popconfirm from '../packages/popconfirm/index.js';
import Skeleton from '../packages/skeleton/index.js'; import Skeleton from '../packages/skeleton/index.js';
import SkeletonItem from '../packages/skeleton-item/index.js'; import SkeletonItem from '../packages/skeleton-item/index.js';
...@@ -88,6 +91,7 @@ import Empty from '../packages/empty/index.js'; ...@@ -88,6 +91,7 @@ import Empty from '../packages/empty/index.js';
import Descriptions from '../packages/descriptions/index.js'; import Descriptions from '../packages/descriptions/index.js';
import DescriptionsItem from '../packages/descriptions-item/index.js'; import DescriptionsItem from '../packages/descriptions-item/index.js';
import Result from '../packages/result/index.js'; import Result from '../packages/result/index.js';
import locale from 'element-ui/src/locale'; import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition'; import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
...@@ -168,6 +172,7 @@ const components = [ ...@@ -168,6 +172,7 @@ const components = [
CascaderPanel, CascaderPanel,
Avatar, Avatar,
Drawer, Drawer,
Statistic,
Popconfirm, Popconfirm,
Skeleton, Skeleton,
SkeletonItem, SkeletonItem,
...@@ -296,6 +301,9 @@ export default { ...@@ -296,6 +301,9 @@ export default {
CascaderPanel, CascaderPanel,
Avatar, Avatar,
Drawer, Drawer,
Statistic,
Popconfirm, Popconfirm,
Skeleton, Skeleton,
SkeletonItem, SkeletonItem,
...@@ -303,4 +311,5 @@ export default { ...@@ -303,4 +311,5 @@ export default {
Descriptions, Descriptions,
DescriptionsItem, DescriptionsItem,
Result Result
}; };
test/unit/specs/statistic.spec.js 0 → 100644
View file @ bd56221e
import { createTest, destroyVM } from '../util';
import Statistic from 'packages/statistic';
describe('Statistic', () => {
let vm;
afterEach(() => {
destroyVM(vm);
});
it('create', () => {
vm = createTest(Statistic, true);
expect(vm.$el).to.exist;
});
});
types/element-ui.d.ts
View file @ bd56221e
import Vue, { PluginObject } from 'vue'
import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component' import Vue, { PluginObject } from 'vue'
import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
import { ElAlert } from './alert'
import { ElAside } from './aside' import { ElAlert } from './alert'
import { ElAutocomplete } from './autocomplete' import { ElAside } from './aside'
import { ElBadge } from './badge' import { ElAutocomplete } from './autocomplete'
import { ElBreadcrumb } from './breadcrumb' import { ElBadge } from './badge'
import { ElBreadcrumbItem } from './breadcrumb-item' import { ElBreadcrumb } from './breadcrumb'
import { ElButton } from './button' import { ElBreadcrumbItem } from './breadcrumb-item'
import { ElButtonGroup } from './button-group' import { ElButton } from './button'
import { ElCard } from './card' import { ElButtonGroup } from './button-group'
import { ElCarousel } from './carousel' import { ElCard } from './card'
import { ElCarouselItem } from './carousel-item' import { ElCarousel } from './carousel'
import { ElCascader } from './cascader' import { ElCarouselItem } from './carousel-item'
import { ElCheckbox } from './checkbox' import { ElCascader } from './cascader'
import { ElCheckboxButton } from './checkbox-button' import { ElCheckbox } from './checkbox'
import { ElCheckboxGroup } from './checkbox-group' import { ElCheckboxButton } from './checkbox-button'
import { ElCol } from './col' import { ElCheckboxGroup } from './checkbox-group'
import { ElCollapse } from './collapse' import { ElCol } from './col'
import { ElCollapseItem } from './collapse-item' import { ElCollapse } from './collapse'
import { ElColorPicker } from './color-picker' import { ElCollapseItem } from './collapse-item'
import { ElContainer } from './container' import { ElColorPicker } from './color-picker'
import { ElDatePicker } from './date-picker' import { ElContainer } from './container'
import { ElDialog } from './dialog' import { ElDatePicker } from './date-picker'
import { ElDropdown } from './dropdown' import { ElDialog } from './dialog'
import { ElDropdownItem } from './dropdown-item' import { ElDropdown } from './dropdown'
import { ElDropdownMenu } from './dropdown-menu' import { ElDropdownItem } from './dropdown-item'
import { ElFooter } from './footer' import { ElDropdownMenu } from './dropdown-menu'
import { ElForm } from './form' import { ElFooter } from './footer'
import { ElFormItem } from './form-item' import { ElForm } from './form'
import { ElHeader } from './header' import { ElFormItem } from './form-item'
import { ElInput } from './input' import { ElHeader } from './header'
import { ElInputNumber } from './input-number' import { ElInput } from './input'
import { ElLoading } from './loading' import { ElInputNumber } from './input-number'
import { ElMain } from './main' import { ElLoading } from './loading'
import { ElMenu } from './menu' import { ElMain } from './main'
import { ElMenuItem } from './menu-item' import { ElMenu } from './menu'
import { ElMenuItemGroup } from './menu-item-group' import { ElMenuItem } from './menu-item'
import { ElMessage } from './message' import { ElMenuItemGroup } from './menu-item-group'
import { ElMessageBox } from './message-box' import { ElMessage } from './message'
import { ElNotification } from './notification' import { ElMessageBox } from './message-box'
import { ElOption } from './option' import { ElNotification } from './notification'
import { ElOptionGroup } from './option-group' import { ElOption } from './option'
import { ElPagination } from './pagination' import { ElOptionGroup } from './option-group'
import { ElPopover } from './popover' import { ElPagination } from './pagination'
import { ElProgress } from './progress' import { ElPopover } from './popover'
import { ElRate } from './rate' import { ElProgress } from './progress'
import { ElRadio } from './radio' import { ElRate } from './rate'
import { ElRadioButton } from './radio-button' import { ElRadio } from './radio'
import { ElRadioGroup } from './radio-group' import { ElRadioButton } from './radio-button'
import { ElRow } from './row' import { ElRadioGroup } from './radio-group'
import { ElSelect } from './select' import { ElRow } from './row'
import { ElSlider } from './slider' import { ElSelect } from './select'
import { ElStep } from './step' import { ElSlider } from './slider'
import { ElSteps } from './steps' import { ElStep } from './step'
import { ElSubmenu } from './submenu' import { ElSteps } from './steps'
import { ElSwitch } from './switch' import { ElSubmenu } from './submenu'
import { ElTable } from './table' import { ElSwitch } from './switch'
import { ElTableColumn } from './table-column' import { ElTable } from './table'
import { ElTag } from './tag' import { ElTableColumn } from './table-column'
import { ElTabs } from './tabs' import { ElTag } from './tag'
import { ElTabPane } from './tab-pane' import { ElTabs } from './tabs'
import { ElTimeline } from './timeline' import { ElTabPane } from './tab-pane'
import { ElTimelineItem } from './timeline-item' import { ElTimeline } from './timeline'
import { ElTimePicker } from './time-picker' import { ElTimelineItem } from './timeline-item'
import { ElTimeSelect } from './time-select' import { ElTimePicker } from './time-picker'
import { ElTooltip } from './tooltip' import { ElTimeSelect } from './time-select'
import { ElTransfer } from './transfer' import { ElTooltip } from './tooltip'
import { ElTree, TreeData } from './tree' import { ElTransfer } from './transfer'
import { ElUpload } from './upload' import { ElTree, TreeData } from './tree'
import { ElLink } from './link' import { ElUpload } from './upload'
import { ElDivider } from './divider' import { ElLink } from './link'
import { ElIcon } from './icon' import { ElDivider } from './divider'
import { ElCalendar } from './calendar' import { ElIcon } from './icon'
import { ElImage } from './image' import { ElCalendar } from './calendar'
import { ElBacktop } from './backtop' import { ElImage } from './image'
import { ElInfiniteScroll } from './infinite-scroll' import { ElBacktop } from './backtop'
import { ElPageHeader } from './page-header' import { ElInfiniteScroll } from './infinite-scroll'
import { ElAvatar } from './avatar' import { ElPageHeader } from './page-header'
import { ElDrawer } from './drawer' import { ElAvatar } from './avatar'
import { ElPopconfirm } from './popconfirm' import { ElDrawer } from './drawer'
import { ElSkeleton } from './skeleton'
import { ElSkeletonItem } from './skeleton-item' import { ElStatistic } from './statistic'
import { ElCascaderPanel } from './cascader-panel'
import { ElEmpty } from './empty' export interface InstallationOptions {
import { ElSpinner } from './spinner' locale: any,
import { ElDescriptions } from './descriptions' i18n: any,
import { ElDescriptionsItem } from './descriptions-item' size: string
import { ElResult } from './result' }
export interface InstallationOptions { /** The version of element-ui */
locale: any, export const version: string
i18n: any,
size: string /**
} * Install all element-ui components into Vue.
* Please do not invoke this method directly.
/** The version of element-ui */ * Call `Vue.use(ElementUI)` to install.
export const version: string */
export function install (vue: typeof Vue, options: InstallationOptions): void
/**
* Install all element-ui components into Vue. /** ElementUI component common definition */
* Please do not invoke this method directly. export type Component = ElementUIComponent
* Call `Vue.use(ElementUI)` to install.
*/ /** Component size definition for button, input, etc */
export function install (vue: typeof Vue, options: InstallationOptions): void export type ComponentSize = ElementUIComponentSize
/** ElementUI component common definition */ /** Horizontal alignment */
export type Component = ElementUIComponent export type HorizontalAlignment = ElementUIHorizontalAlignment
/** Component size definition for button, input, etc */ /** Show animation while loading data */
export type ComponentSize = ElementUIComponentSize export const Loading: ElLoading
/** Horizontal alignment */ /** 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 type HorizontalAlignment = ElementUIHorizontalAlignment export const Message: ElMessage
/** Show animation while loading data */ /** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */
export const Loading: ElLoading export const MessageBox: ElMessageBox
/** 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. */ /** Displays a global notification message at the upper right corner of the page */
export const Message: ElMessage export const Notification: ElNotification
/** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */ // TS cannot merge imported class with namespace, so declare subclasses instead
export const MessageBox: ElMessageBox
/** Alert Component */
/** Displays a global notification message at the upper right corner of the page */ export class Alert extends ElAlert {}
export const Notification: ElNotification
/** Aside Component */
// TS cannot merge imported class with namespace, so declare subclasses instead export class Aside extends ElAside {}
/** Alert Component */ /** Autocomplete Component */
export class Alert extends ElAlert {} export class Autocomplete extends ElAutocomplete {}
/** Aside Component */ /** Bagde Component */
export class Aside extends ElAside {} export class Badge extends ElBadge {}
/** Autocomplete Component */ /** Breadcrumb Component */
export class Autocomplete extends ElAutocomplete {} export class Breadcrumb extends ElBreadcrumb {}
/** Bagde Component */ /** Breadcrumb Item Component */
export class Badge extends ElBadge {} export class BreadcrumbItem extends ElBreadcrumbItem {}
/** Breadcrumb Component */ /** Button Component */
export class Breadcrumb extends ElBreadcrumb {} export class Button extends ElButton {}
/** Breadcrumb Item Component */ /** Button Group Component */
export class BreadcrumbItem extends ElBreadcrumbItem {} export class ButtonGroup extends ElButtonGroup {}
/** Button Component */ /** Card Component */
export class Button extends ElButton {} export class Card extends ElCard {}
/** Button Group Component */ /** Cascader Component */
export class ButtonGroup extends ElButtonGroup {} export class Cascader extends ElCascader {}
/** Card Component */ /** Carousel Component */
export class Card extends ElCard {} export class Carousel extends ElCarousel {}
/** Cascader Component */ /** Carousel Item Component */
export class Cascader extends ElCascader {} export class CarouselItem extends ElCarouselItem {}
/** Carousel Component */ /** Checkbox Component */
export class Carousel extends ElCarousel {} export class Checkbox extends ElCheckbox {}
/** Carousel Item Component */ /** Checkbox Button Component */
export class CarouselItem extends ElCarouselItem {} export class CheckboxButton extends ElCheckboxButton {}
/** Checkbox Component */ /** Checkbox Group Component */
export class Checkbox extends ElCheckbox {} export class CheckboxGroup extends ElCheckboxGroup {}
/** Checkbox Button Component */ /** Colunm Layout Component */
export class CheckboxButton extends ElCheckboxButton {} export class Col extends ElCol {}
/** Checkbox Group Component */ /** Collapse Component */
export class CheckboxGroup extends ElCheckboxGroup {} export class Collapse extends ElCollapse {}
/** Colunm Layout Component */ /** Collapse Item Component */
export class Col extends ElCol {} export class CollapseItem extends ElCollapseItem {}
/** Collapse Component */ /** Color Picker Component */
export class Collapse extends ElCollapse {} export class ColorPicker extends ElColorPicker {}
/** Collapse Item Component */ /** Container Component */
export class CollapseItem extends ElCollapseItem {} export class Container extends ElContainer {}
/** Color Picker Component */ /** Date Picker Component */
export class ColorPicker extends ElColorPicker {} export class DatePicker extends ElDatePicker {}
/** Container Component */ /** Dialog Component */
export class Container extends ElContainer {} export class Dialog extends ElDialog {}
/** Date Picker Component */ /** Dropdown Component */
export class DatePicker extends ElDatePicker {} export class Dropdown extends ElDropdown {}
/** Dialog Component */ /** Dropdown Item Component */
export class Dialog extends ElDialog {} export class DropdownItem extends ElDropdownItem {}
/** Dropdown Component */ /** Dropdown Menu Component */
export class Dropdown extends ElDropdown {} export class DropdownMenu extends ElDropdownMenu {}
/** Dropdown Item Component */ /** Footer Component */
export class DropdownItem extends ElDropdownItem {} export class Footer extends ElFooter {}
/** Dropdown Menu Component */ /** Form Component */
export class DropdownMenu extends ElDropdownMenu {} export class Form extends ElForm {}
/** Footer Component */ /** Form Item Component */
export class Footer extends ElFooter {} export class FormItem extends ElFormItem {}
/** Form Component */ /** Header Component */
export class Form extends ElForm {} export class Header extends ElHeader {}
/** Form Item Component */ /** Input Component */
export class FormItem extends ElFormItem {} export class Input extends ElInput {}
/** Header Component */ /** Input Number Component */
export class Header extends ElHeader {} export class InputNumber extends ElInputNumber {}
/** Input Component */ /** Main Component */
export class Input extends ElInput {} export class Main extends ElMain {}
/** Input Number Component */ /** Menu that provides navigation for your website */
export class InputNumber extends ElInputNumber {} export class Menu extends ElMenu {}
/** Main Component */ /** Menu Item Component */
export class Main extends ElMain {} export class MenuItem extends ElMenuItem {}
/** Menu that provides navigation for your website */ /** Menu Item Group Component */
export class Menu extends ElMenu {} export class MenuItemGroup extends ElMenuItemGroup {}
/** Menu Item Component */ /** Dropdown Select Option Component */
export class MenuItem extends ElMenuItem {} export class Option extends ElOption {}
/** Menu Item Group Component */ /** Dropdown Select Option Group Component */
export class MenuItemGroup extends ElMenuItemGroup {} export class OptionGroup extends ElOptionGroup {}
/** Dropdown Select Option Component */ /** Pagination Component */
export class Option extends ElOption {} export class Pagination extends ElPagination {}
/** Dropdown Select Option Group Component */ /** Popover Component */
export class OptionGroup extends ElOptionGroup {} export class Popover extends ElPopover {}
/** Pagination Component */ /** Progress Component */
export class Pagination extends ElPagination {} export class Progress extends ElProgress {}
/** Popover Component */ /** Rate Component */
export class Popover extends ElPopover {} export class Rate extends ElRate {}
/** Progress Component */ /** Radio Component */
export class Progress extends ElProgress {} export class Radio extends ElRadio {}
/** Rate Component */ /** Radio Button Component */
export class Rate extends ElRate {} export class RadioButton extends ElRadioButton {}
/** Radio Component */ /** Radio Group Component */
export class Radio extends ElRadio {} export class RadioGroup extends ElRadioGroup {}
/** Radio Button Component */ /** Row Layout Component */
export class RadioButton extends ElRadioButton {} export class Row extends ElRow {}
/** Radio Group Component */ /** Dropdown Select Component */
export class RadioGroup extends ElRadioGroup {} export class Select extends ElSelect {}
/** Row Layout Component */ /** Slider Component */
export class Row extends ElRow {} export class Slider extends ElSlider {}
/** Dropdown Select Component */ /** Step Component */
export class Select extends ElSelect {} export class Step extends ElStep {}
/** Slider Component */ /** Steps Component */
export class Slider extends ElSlider {} export class Steps extends ElSteps {}
/** Step Component */ /** Submenu Component */
export class Step extends ElStep {} export class Submenu extends ElSubmenu {}
/** Steps Component */ /** Switch Component */
export class Steps extends ElSteps {} export class Switch extends ElSwitch {}
/** Submenu Component */ /** Table Component */
export class Submenu extends ElSubmenu {} export class Table extends ElTable {}
/** Switch Component */ /** Table Column Component */
export class Switch extends ElSwitch {} export class TableColumn extends ElTableColumn {}
/** Table Component */ /** Tabs Component */
export class Table extends ElTable {} export class Tabs extends ElTabs {}
/** Table Column Component */ /** Tab Pane Component */
export class TableColumn extends ElTableColumn {} export class TabPane extends ElTabPane {}
/** Tabs Component */ /** Tag Component */
export class Tabs extends ElTabs {} export class Tag extends ElTag {}
/** Tab Pane Component */ /** Timeline Component */
export class TabPane extends ElTabPane {} export class Timeline extends ElTimeline {}
/** Tag Component */ /** Timeline Item Component */
export class Tag extends ElTag {} export class TimelineItem extends ElTimelineItem {}
/** Timeline Component */ /** TimePicker Component */
export class Timeline extends ElTimeline {} export class TimePicker extends ElTimePicker {}
/** Timeline Item Component */ /** TimeSelect Component */
export class TimelineItem extends ElTimelineItem {} export class TimeSelect extends ElTimeSelect {}
/** TimePicker Component */ /** Tooltip Component */
export class TimePicker extends ElTimePicker {} export class Tooltip extends ElTooltip {}
/** TimeSelect Component */ /** Transfer Component */
export class TimeSelect extends ElTimeSelect {} export class Transfer extends ElTransfer {}
/** Tooltip Component */ /** Tree Component */
export class Tooltip extends ElTooltip {} export class Tree<K = any, D = TreeData> extends ElTree<K, D> {}
/** Transfer Component */ /** Upload Component */
export class Transfer extends ElTransfer {} export class Upload extends ElUpload {}
/** Tree Component */ /** Divider Component */
export class Tree<K = any, D = TreeData> extends ElTree<K, D> {} export class Divider extends ElDivider {}
/** Upload Component */ /** Link Component */
export class Upload extends ElUpload {} export class Link extends ElLink {}
/** Divider Component */ /** Image Component */
export class Divider extends ElDivider {} export class Image extends ElImage {}
/** Link Component */ /** Icon Component */
export class Link extends ElLink {} export class Icon extends ElIcon {}
/** Image Component */ /** Calendar Component */
export class Image extends ElImage {} export class Calendar extends ElCalendar {}
/** Icon Component */ /** Backtop Component */
export class Icon extends ElIcon {} export class Backtop extends ElBacktop {}
/** Calendar Component */ /** InfiniteScroll Directive */
export class Calendar extends ElCalendar {} export const InfiniteScroll: PluginObject<ElInfiniteScroll>;
/** Backtop Component */ /** PageHeader Component */
export class Backtop extends ElBacktop {} export class PageHeader extends ElPageHeader {}
/** InfiniteScroll Directive */ /** Avatar Component */
export const InfiniteScroll: PluginObject<ElInfiniteScroll>; export class Avatar extends ElAvatar {}
/** PageHeader Component */ /** Drawer Component */
export class PageHeader extends ElPageHeader {} export class Drawer extends ElDrawer {}
/** Avatar Component */ /** Statistic Component */
export class Avatar extends ElAvatar {} export class Statistic extends ElStatistic {}
/** Drawer Component */ import Vue, { PluginObject } from 'vue'
export class Drawer extends ElDrawer {} import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
/** Popconfirm Component */ import { ElAlert } from './alert'
export class Popconfirm extends ElPopconfirm {} import { ElAside } from './aside'
import { ElAutocomplete } from './autocomplete'
/** Skeleton Component */ import { ElBadge } from './badge'
export class Skeleton extends ElSkeleton {} import { ElBreadcrumb } from './breadcrumb'
import { ElBreadcrumbItem } from './breadcrumb-item'
/** Skeleton Item Component */ import { ElButton } from './button'
export class SkeletonItem extends ElSkeletonItem {} import { ElButtonGroup } from './button-group'
import { ElCard } from './card'
/** CascaderPanel Component */ import { ElCarousel } from './carousel'
export class CascaderPanel extends ElCascaderPanel {} import { ElCarouselItem } from './carousel-item'
import { ElCascader } from './cascader'
/** Empty Component */ import { ElCheckbox } from './checkbox'
export class Empty extends ElEmpty {} import { ElCheckboxButton } from './checkbox-button'
import { ElCheckboxGroup } from './checkbox-group'
/** Spinner Component */ import { ElCol } from './col'
export class Spinner extends ElSpinner {} import { ElCollapse } from './collapse'
import { ElCollapseItem } from './collapse-item'
/** Description Component */ import { ElColorPicker } from './color-picker'
export class Descriptions extends ElDescriptions {} import { ElContainer } from './container'
import { ElDatePicker } from './date-picker'
/** Description Item Component */ import { ElDialog } from './dialog'
export class DescriptionsItem extends ElDescriptionsItem {} import { ElDropdown } from './dropdown'
import { ElDropdownItem } from './dropdown-item'
/** Result Component */ import { ElDropdownMenu } from './dropdown-menu'
export class Result extends ElResult {} import { ElFooter } from './footer'
\ No newline at end of file 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 { ElPopconfirm } from './popconfirm'
import { ElSkeleton } from './skeleton'
import { ElSkeletonItem } from './skeleton-item'
import { ElCascaderPanel } from './cascader-panel'
import { ElEmpty } from './empty'
import { ElSpinner } from './spinner'
import { ElDescriptions } from './descriptions'
import { ElDescriptionsItem } from './descriptions-item'
import { ElResult } from './result'
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 {}
/** Popconfirm Component */
export class Popconfirm extends ElPopconfirm {}
/** Skeleton Component */
export class Skeleton extends ElSkeleton {}
/** Skeleton Item Component */
export class SkeletonItem extends ElSkeletonItem {}
/** CascaderPanel Component */
export class CascaderPanel extends ElCascaderPanel {}
/** Empty Component */
export class Empty extends ElEmpty {}
/** Spinner Component */
export class Spinner extends ElSpinner {}
/** Description Component */
export class Descriptions extends ElDescriptions {}
/** Description Item Component */
export class DescriptionsItem extends ElDescriptionsItem {}
/** Result Component */
export class Result extends ElResult {}
types/statistic.d.ts 0 → 100644
View file @ bd56221e
import { ElementUIComponent } from './component'
/** Statistic Component */
export declare class ElStatistic extends ElementUIComponent {
/** Set the decimal point */
decimalSeparator:string
/** Sets the thousandth identifier */
groupSeparator:string
/** numerical precision */
precision:number
/** Numerical content */
value:string|number
/** Title of numerical value */
title:string|number
/**Whether to enable the countdown function */
timeIndices:boolean
/** Sets the style of the value */
valueStyle:object
/** Numeric content formatting countdown display*/
format:string
/** Set the ratio */
rate:number
/** Set the suffix of the value*/
suffix:string
/** Set the prefix of the value*/
prefix:string
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment