mirror of https://github.com/ElemeFE/element
chore: add new component statistics (#22159)
* statistic：新增statistic组件，用于数值展示和倒计时 Co-authored-by: yang <29636098325@qq.com>pull/22176/head
yang
GitHub
parent
490bcba1f2
commit
bd56221e82
|
|
@ -1,5 +1,6 @@
|
|||
<p align="center">
|
||||
<img src="https://cdn.rawgit.com/ElemeFE/element/dev/element_logo.svg">
|
||||
1212
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@
|
|||
"cascader-panel": "./packages/cascader-panel/index.js",
|
||||
"avatar": "./packages/avatar/index.js",
|
||||
"drawer": "./packages/drawer/index.js",
|
||||
"statistic": "./packages/statistic/index.js"
|
||||
"popconfirm": "./packages/popconfirm/index.js",
|
||||
"skeleton": "./packages/skeleton/index.js",
|
||||
"skeleton-item": "./packages/skeleton-item/index.js",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,218 @@
|
|||
## 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) |
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
## 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) |
|
||||
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
## Statistic
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
## 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) |
|
||||
|
||||
|
||||
|
|
@ -192,6 +192,10 @@
|
|||
{
|
||||
"path": "/result",
|
||||
"title": "Result 结果"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic 统计数值"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -621,6 +625,10 @@
|
|||
{
|
||||
"path": "/drawer",
|
||||
"title": "Drawer"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -935,6 +943,10 @@
|
|||
{
|
||||
"path": "/drawer",
|
||||
"title": "Drawer"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1249,6 +1261,10 @@
|
|||
{
|
||||
"path": "/drawer",
|
||||
"title": "Drawer"
|
||||
},
|
||||
{
|
||||
"path": "/statistic",
|
||||
"title": "Statistic"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import Statistic from './src/main';
|
||||
|
||||
/* istanbul ignore next */
|
||||
Statistic.install = function(Vue) {
|
||||
Vue.component(Statistic.name, Statistic);
|
||||
};
|
||||
|
||||
export default Statistic;
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
<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>
|
||||
|
|
@ -77,6 +77,7 @@
|
|||
@import "./cascader-panel.scss";
|
||||
@import "./avatar.scss";
|
||||
@import "./drawer.scss";
|
||||
@import "./statistic.scss";
|
||||
@import "./popconfirm.scss";
|
||||
@import "./skeleton.scss";
|
||||
@import "./skeleton-item.scss";
|
||||
|
|
@ -84,3 +85,4 @@
|
|||
@import "./descriptions.scss";
|
||||
@import "./descriptions-item.scss";
|
||||
@import "./result.scss";
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
@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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -81,6 +81,9 @@ import PageHeader from '../packages/page-header/index.js';
|
|||
import CascaderPanel from '../packages/cascader-panel/index.js';
|
||||
import Avatar from '../packages/avatar/index.js';
|
||||
import Drawer from '../packages/drawer/index.js';
|
||||
|
||||
import Statistic from '../packages/statistic/index.js';
|
||||
|
||||
import Popconfirm from '../packages/popconfirm/index.js';
|
||||
import Skeleton from '../packages/skeleton/index.js';
|
||||
import SkeletonItem from '../packages/skeleton-item/index.js';
|
||||
|
|
@ -88,6 +91,7 @@ import Empty from '../packages/empty/index.js';
|
|||
import Descriptions from '../packages/descriptions/index.js';
|
||||
import DescriptionsItem from '../packages/descriptions-item/index.js';
|
||||
import Result from '../packages/result/index.js';
|
||||
|
||||
import locale from 'element-ui/src/locale';
|
||||
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
|
||||
|
||||
|
|
@ -168,6 +172,7 @@ const components = [
|
|||
CascaderPanel,
|
||||
Avatar,
|
||||
Drawer,
|
||||
Statistic,
|
||||
Popconfirm,
|
||||
Skeleton,
|
||||
SkeletonItem,
|
||||
|
|
@ -296,6 +301,9 @@ export default {
|
|||
CascaderPanel,
|
||||
Avatar,
|
||||
Drawer,
|
||||
|
||||
Statistic,
|
||||
|
||||
Popconfirm,
|
||||
Skeleton,
|
||||
SkeletonItem,
|
||||
|
|
@ -303,4 +311,5 @@ export default {
|
|||
Descriptions,
|
||||
DescriptionsItem,
|
||||
Result
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import { createTest, destroyVM } from '../util';
|
||||
import Statistic from 'packages/statistic';
|
||||
|
||||
describe('Statistic', () => {
|
||||
let vm;
|
||||
afterEach(() => {
|
||||
destroyVM(vm);
|
||||
});
|
||||
|
||||
it('create', () => {
|
||||
vm = createTest(Statistic, true);
|
||||
expect(vm.$el).to.exist;
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -1,3 +1,352 @@
|
|||
|
||||
import Vue, { PluginObject } from 'vue'
|
||||
import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
|
||||
|
||||
import { ElAlert } from './alert'
|
||||
import { ElAside } from './aside'
|
||||
import { ElAutocomplete } from './autocomplete'
|
||||
import { ElBadge } from './badge'
|
||||
import { ElBreadcrumb } from './breadcrumb'
|
||||
import { ElBreadcrumbItem } from './breadcrumb-item'
|
||||
import { ElButton } from './button'
|
||||
import { ElButtonGroup } from './button-group'
|
||||
import { ElCard } from './card'
|
||||
import { ElCarousel } from './carousel'
|
||||
import { ElCarouselItem } from './carousel-item'
|
||||
import { ElCascader } from './cascader'
|
||||
import { ElCheckbox } from './checkbox'
|
||||
import { ElCheckboxButton } from './checkbox-button'
|
||||
import { ElCheckboxGroup } from './checkbox-group'
|
||||
import { ElCol } from './col'
|
||||
import { ElCollapse } from './collapse'
|
||||
import { ElCollapseItem } from './collapse-item'
|
||||
import { ElColorPicker } from './color-picker'
|
||||
import { ElContainer } from './container'
|
||||
import { ElDatePicker } from './date-picker'
|
||||
import { ElDialog } from './dialog'
|
||||
import { ElDropdown } from './dropdown'
|
||||
import { ElDropdownItem } from './dropdown-item'
|
||||
import { ElDropdownMenu } from './dropdown-menu'
|
||||
import { ElFooter } from './footer'
|
||||
import { ElForm } from './form'
|
||||
import { ElFormItem } from './form-item'
|
||||
import { ElHeader } from './header'
|
||||
import { ElInput } from './input'
|
||||
import { ElInputNumber } from './input-number'
|
||||
import { ElLoading } from './loading'
|
||||
import { ElMain } from './main'
|
||||
import { ElMenu } from './menu'
|
||||
import { ElMenuItem } from './menu-item'
|
||||
import { ElMenuItemGroup } from './menu-item-group'
|
||||
import { ElMessage } from './message'
|
||||
import { ElMessageBox } from './message-box'
|
||||
import { ElNotification } from './notification'
|
||||
import { ElOption } from './option'
|
||||
import { ElOptionGroup } from './option-group'
|
||||
import { ElPagination } from './pagination'
|
||||
import { ElPopover } from './popover'
|
||||
import { ElProgress } from './progress'
|
||||
import { ElRate } from './rate'
|
||||
import { ElRadio } from './radio'
|
||||
import { ElRadioButton } from './radio-button'
|
||||
import { ElRadioGroup } from './radio-group'
|
||||
import { ElRow } from './row'
|
||||
import { ElSelect } from './select'
|
||||
import { ElSlider } from './slider'
|
||||
import { ElStep } from './step'
|
||||
import { ElSteps } from './steps'
|
||||
import { ElSubmenu } from './submenu'
|
||||
import { ElSwitch } from './switch'
|
||||
import { ElTable } from './table'
|
||||
import { ElTableColumn } from './table-column'
|
||||
import { ElTag } from './tag'
|
||||
import { ElTabs } from './tabs'
|
||||
import { ElTabPane } from './tab-pane'
|
||||
import { ElTimeline } from './timeline'
|
||||
import { ElTimelineItem } from './timeline-item'
|
||||
import { ElTimePicker } from './time-picker'
|
||||
import { ElTimeSelect } from './time-select'
|
||||
import { ElTooltip } from './tooltip'
|
||||
import { ElTransfer } from './transfer'
|
||||
import { ElTree, TreeData } from './tree'
|
||||
import { ElUpload } from './upload'
|
||||
import { ElLink } from './link'
|
||||
import { ElDivider } from './divider'
|
||||
import { ElIcon } from './icon'
|
||||
import { ElCalendar } from './calendar'
|
||||
import { ElImage } from './image'
|
||||
import { ElBacktop } from './backtop'
|
||||
import { ElInfiniteScroll } from './infinite-scroll'
|
||||
import { ElPageHeader } from './page-header'
|
||||
import { ElAvatar } from './avatar'
|
||||
import { ElDrawer } from './drawer'
|
||||
|
||||
import { ElStatistic } from './statistic'
|
||||
|
||||
export interface InstallationOptions {
|
||||
locale: any,
|
||||
i18n: any,
|
||||
size: string
|
||||
}
|
||||
|
||||
/** The version of element-ui */
|
||||
export const version: string
|
||||
|
||||
/**
|
||||
* Install all element-ui components into Vue.
|
||||
* Please do not invoke this method directly.
|
||||
* Call `Vue.use(ElementUI)` to install.
|
||||
*/
|
||||
export function install (vue: typeof Vue, options: InstallationOptions): void
|
||||
|
||||
/** ElementUI component common definition */
|
||||
export type Component = ElementUIComponent
|
||||
|
||||
/** Component size definition for button, input, etc */
|
||||
export type ComponentSize = ElementUIComponentSize
|
||||
|
||||
/** Horizontal alignment */
|
||||
export type HorizontalAlignment = ElementUIHorizontalAlignment
|
||||
|
||||
/** Show animation while loading data */
|
||||
export const Loading: ElLoading
|
||||
|
||||
/** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */
|
||||
export const Message: ElMessage
|
||||
|
||||
/** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */
|
||||
export const MessageBox: ElMessageBox
|
||||
|
||||
/** Displays a global notification message at the upper right corner of the page */
|
||||
export const Notification: ElNotification
|
||||
|
||||
// TS cannot merge imported class with namespace, so declare subclasses instead
|
||||
|
||||
/** Alert Component */
|
||||
export class Alert extends ElAlert {}
|
||||
|
||||
/** Aside Component */
|
||||
export class Aside extends ElAside {}
|
||||
|
||||
/** Autocomplete Component */
|
||||
export class Autocomplete extends ElAutocomplete {}
|
||||
|
||||
/** Bagde Component */
|
||||
export class Badge extends ElBadge {}
|
||||
|
||||
/** Breadcrumb Component */
|
||||
export class Breadcrumb extends ElBreadcrumb {}
|
||||
|
||||
/** Breadcrumb Item Component */
|
||||
export class BreadcrumbItem extends ElBreadcrumbItem {}
|
||||
|
||||
/** Button Component */
|
||||
export class Button extends ElButton {}
|
||||
|
||||
/** Button Group Component */
|
||||
export class ButtonGroup extends ElButtonGroup {}
|
||||
|
||||
/** Card Component */
|
||||
export class Card extends ElCard {}
|
||||
|
||||
/** Cascader Component */
|
||||
export class Cascader extends ElCascader {}
|
||||
|
||||
/** Carousel Component */
|
||||
export class Carousel extends ElCarousel {}
|
||||
|
||||
/** Carousel Item Component */
|
||||
export class CarouselItem extends ElCarouselItem {}
|
||||
|
||||
/** Checkbox Component */
|
||||
export class Checkbox extends ElCheckbox {}
|
||||
|
||||
/** Checkbox Button Component */
|
||||
export class CheckboxButton extends ElCheckboxButton {}
|
||||
|
||||
/** Checkbox Group Component */
|
||||
export class CheckboxGroup extends ElCheckboxGroup {}
|
||||
|
||||
/** Colunm Layout Component */
|
||||
export class Col extends ElCol {}
|
||||
|
||||
/** Collapse Component */
|
||||
export class Collapse extends ElCollapse {}
|
||||
|
||||
/** Collapse Item Component */
|
||||
export class CollapseItem extends ElCollapseItem {}
|
||||
|
||||
/** Color Picker Component */
|
||||
export class ColorPicker extends ElColorPicker {}
|
||||
|
||||
/** Container Component */
|
||||
export class Container extends ElContainer {}
|
||||
|
||||
/** Date Picker Component */
|
||||
export class DatePicker extends ElDatePicker {}
|
||||
|
||||
/** Dialog Component */
|
||||
export class Dialog extends ElDialog {}
|
||||
|
||||
/** Dropdown Component */
|
||||
export class Dropdown extends ElDropdown {}
|
||||
|
||||
/** Dropdown Item Component */
|
||||
export class DropdownItem extends ElDropdownItem {}
|
||||
|
||||
/** Dropdown Menu Component */
|
||||
export class DropdownMenu extends ElDropdownMenu {}
|
||||
|
||||
/** Footer Component */
|
||||
export class Footer extends ElFooter {}
|
||||
|
||||
/** Form Component */
|
||||
export class Form extends ElForm {}
|
||||
|
||||
/** Form Item Component */
|
||||
export class FormItem extends ElFormItem {}
|
||||
|
||||
/** Header Component */
|
||||
export class Header extends ElHeader {}
|
||||
|
||||
/** Input Component */
|
||||
export class Input extends ElInput {}
|
||||
|
||||
/** Input Number Component */
|
||||
export class InputNumber extends ElInputNumber {}
|
||||
|
||||
/** Main Component */
|
||||
export class Main extends ElMain {}
|
||||
|
||||
/** Menu that provides navigation for your website */
|
||||
export class Menu extends ElMenu {}
|
||||
|
||||
/** Menu Item Component */
|
||||
export class MenuItem extends ElMenuItem {}
|
||||
|
||||
/** Menu Item Group Component */
|
||||
export class MenuItemGroup extends ElMenuItemGroup {}
|
||||
|
||||
/** Dropdown Select Option Component */
|
||||
export class Option extends ElOption {}
|
||||
|
||||
/** Dropdown Select Option Group Component */
|
||||
export class OptionGroup extends ElOptionGroup {}
|
||||
|
||||
/** Pagination Component */
|
||||
export class Pagination extends ElPagination {}
|
||||
|
||||
/** Popover Component */
|
||||
export class Popover extends ElPopover {}
|
||||
|
||||
/** Progress Component */
|
||||
export class Progress extends ElProgress {}
|
||||
|
||||
/** Rate Component */
|
||||
export class Rate extends ElRate {}
|
||||
|
||||
/** Radio Component */
|
||||
export class Radio extends ElRadio {}
|
||||
|
||||
/** Radio Button Component */
|
||||
export class RadioButton extends ElRadioButton {}
|
||||
|
||||
/** Radio Group Component */
|
||||
export class RadioGroup extends ElRadioGroup {}
|
||||
|
||||
/** Row Layout Component */
|
||||
export class Row extends ElRow {}
|
||||
|
||||
/** Dropdown Select Component */
|
||||
export class Select extends ElSelect {}
|
||||
|
||||
/** Slider Component */
|
||||
export class Slider extends ElSlider {}
|
||||
|
||||
/** Step Component */
|
||||
export class Step extends ElStep {}
|
||||
|
||||
/** Steps Component */
|
||||
export class Steps extends ElSteps {}
|
||||
|
||||
/** Submenu Component */
|
||||
export class Submenu extends ElSubmenu {}
|
||||
|
||||
/** Switch Component */
|
||||
export class Switch extends ElSwitch {}
|
||||
|
||||
/** Table Component */
|
||||
export class Table extends ElTable {}
|
||||
|
||||
/** Table Column Component */
|
||||
export class TableColumn extends ElTableColumn {}
|
||||
|
||||
/** Tabs Component */
|
||||
export class Tabs extends ElTabs {}
|
||||
|
||||
/** Tab Pane Component */
|
||||
export class TabPane extends ElTabPane {}
|
||||
|
||||
/** Tag Component */
|
||||
export class Tag extends ElTag {}
|
||||
|
||||
/** Timeline Component */
|
||||
export class Timeline extends ElTimeline {}
|
||||
|
||||
/** Timeline Item Component */
|
||||
export class TimelineItem extends ElTimelineItem {}
|
||||
|
||||
/** TimePicker Component */
|
||||
export class TimePicker extends ElTimePicker {}
|
||||
|
||||
/** TimeSelect Component */
|
||||
export class TimeSelect extends ElTimeSelect {}
|
||||
|
||||
/** Tooltip Component */
|
||||
export class Tooltip extends ElTooltip {}
|
||||
|
||||
/** Transfer Component */
|
||||
export class Transfer extends ElTransfer {}
|
||||
|
||||
/** Tree Component */
|
||||
export class Tree<K = any, D = TreeData> extends ElTree<K, D> {}
|
||||
|
||||
/** Upload Component */
|
||||
export class Upload extends ElUpload {}
|
||||
|
||||
/** Divider Component */
|
||||
export class Divider extends ElDivider {}
|
||||
|
||||
/** Link Component */
|
||||
export class Link extends ElLink {}
|
||||
|
||||
/** Image Component */
|
||||
export class Image extends ElImage {}
|
||||
|
||||
/** Icon Component */
|
||||
export class Icon extends ElIcon {}
|
||||
|
||||
/** Calendar Component */
|
||||
export class Calendar extends ElCalendar {}
|
||||
|
||||
/** Backtop Component */
|
||||
export class Backtop extends ElBacktop {}
|
||||
|
||||
/** InfiniteScroll Directive */
|
||||
export const InfiniteScroll: PluginObject<ElInfiniteScroll>;
|
||||
|
||||
/** PageHeader Component */
|
||||
export class PageHeader extends ElPageHeader {}
|
||||
|
||||
/** Avatar Component */
|
||||
export class Avatar extends ElAvatar {}
|
||||
|
||||
/** Drawer Component */
|
||||
export class Drawer extends ElDrawer {}
|
||||
|
||||
/** Statistic Component */
|
||||
export class Statistic extends ElStatistic {}
|
||||
|
||||
import Vue, { PluginObject } from 'vue'
|
||||
import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import { ElementUIComponent } from './component'
|
||||
|
||||
/** Statistic Component */
|
||||
export declare class ElStatistic extends ElementUIComponent {
|
||||
/** Set the decimal point */
|
||||
decimalSeparator:string
|
||||
/** Sets the thousandth identifier */
|
||||
groupSeparator:string
|
||||
/** numerical precision */
|
||||
precision:number
|
||||
/** Numerical content */
|
||||
value:string|number
|
||||
/** Title of numerical value */
|
||||
title:string|number
|
||||
/**Whether to enable the countdown function */
|
||||
timeIndices:boolean
|
||||
/** Sets the style of the value */
|
||||
valueStyle:object
|
||||
/** Numeric content formatting countdown display*/
|
||||
format:string
|
||||
/** Set the ratio */
|
||||
rate:number
|
||||
/** Set the suffix of the value*/
|
||||
suffix:string
|
||||
/** Set the prefix of the value*/
|
||||
prefix:string
|
||||
}
|
||||
Loading…
Reference in New Issue