mirror of https://github.com/ElemeFE/element
Empty: add empty component (#21080)
好多大米
GitHub
parent
75290629ae
commit
d0b3454032
|
|
@ -82,5 +82,6 @@
|
|||
"drawer": "./packages/drawer/index.js",
|
||||
"popconfirm": "./packages/popconfirm/index.js",
|
||||
"skeleton": "./packages/skeleton/index.js",
|
||||
"skeleton-item": "./packages/skeleton-item/index.js"
|
||||
"skeleton-item": "./packages/skeleton-item/index.js",
|
||||
"empty": "./packages/empty/index.js"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
## Empty
|
||||
|
||||
Placeholder hints for empty states.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty description="description"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom image
|
||||
|
||||
Use `image` prop to set image URL.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Image size
|
||||
|
||||
Use `image-size` prop to control image size.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty :image-size="200"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Bottom content
|
||||
|
||||
Use the default slot to insert content at the bottom.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-empty>
|
||||
<el-button type="primary">Button</el-button>
|
||||
</el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Empty Attributes
|
||||
| Attribute | Description | Type | Acceptable Value | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| image | image URL | string | — | — |
|
||||
| image-size | image size (width) | number | — | — |
|
||||
| description | description | string | — | — |
|
||||
|
||||
### Empty Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| default | Custom bottom content |
|
||||
| image | Custom image |
|
||||
| description | Custom description |
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
## Empty
|
||||
|
||||
Placeholder hints for empty states.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty description="descrição"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom image
|
||||
|
||||
Use `image` prop to set image URL.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Image size
|
||||
|
||||
Use `image-size` prop to control image size.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty :image-size="200"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Bottom content
|
||||
|
||||
Use the default slot to insert content at the bottom.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-empty>
|
||||
<el-button type="primary">Button</el-button>
|
||||
</el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Empty Attributes
|
||||
| Attribute | Description | Type | Acceptable Value | Default Value |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| image | image URL | string | — | — |
|
||||
| image-size | image size (width) | number | — | — |
|
||||
| description | description | string | — | — |
|
||||
|
||||
### Empty Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| default | Custom bottom content |
|
||||
| image | Custom image |
|
||||
| description | Custom description |
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
## Empty
|
||||
|
||||
Placeholder hints for empty states.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty description="description"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom image
|
||||
|
||||
Use `image` prop to set image URL.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Image size
|
||||
|
||||
Use `image-size` prop to control image size.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty :image-size="200"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Bottom content
|
||||
|
||||
Use the default slot to insert content at the bottom.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-empty>
|
||||
<el-button type="primary">Button</el-button>
|
||||
</el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Empty Attributes
|
||||
| Attribute | Description | Type | Acceptable Value | Default Value |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| image | image URL | string | — | — |
|
||||
| image-size | image size (width) | number | — | — |
|
||||
| description | description | string | — | — |
|
||||
|
||||
### Empty Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| default | Custom bottom content |
|
||||
| image | Custom image |
|
||||
| description | Custom description |
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
## Empty 空状态
|
||||
|
||||
空状态时的占位提示。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty description="描述文字"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义图片
|
||||
|
||||
通过设置 `image` 属性传入图片 URL。
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### 图片尺寸
|
||||
|
||||
通过设置 `image-size` 属性来控制图片大小。
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-empty :image-size="200"></el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### 底部内容
|
||||
|
||||
使用默认插槽可在底部插入内容。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-empty>
|
||||
<el-button type="primary">按钮</el-button>
|
||||
</el-empty>
|
||||
```
|
||||
:::
|
||||
|
||||
### Empty Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| image | 图片地址 | string | — | — |
|
||||
| image-size | 图片大小（宽度） | number | — | — |
|
||||
| description | 文本描述 | string | — | — |
|
||||
|
||||
### Empty Slots
|
||||
|
||||
| Name | 说明 |
|
||||
|------|--------|
|
||||
| default | 自定义底部内容 |
|
||||
| image | 自定义图片 |
|
||||
| description | 自定义描述文字 |
|
||||
|
|
@ -180,6 +180,10 @@
|
|||
{
|
||||
"path": "/skeleton",
|
||||
"title": "Skeleton 骨架屏"
|
||||
},
|
||||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty 空状态"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -478,6 +482,10 @@
|
|||
{
|
||||
"path": "/skeleton",
|
||||
"title": "Skeleton"
|
||||
},
|
||||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -780,6 +788,10 @@
|
|||
{
|
||||
"path": "/skeleton",
|
||||
"title": "Skeleton"
|
||||
},
|
||||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -1082,6 +1094,10 @@
|
|||
{
|
||||
"path": "/skeleton",
|
||||
"title": "Skeleton"
|
||||
},
|
||||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
import Empty from './src/index.vue';
|
||||
|
||||
Empty.install = (Vue) => {
|
||||
Vue.component(Empty.name, Empty);
|
||||
};
|
||||
|
||||
export default Empty;
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<template>
|
||||
<svg
|
||||
viewBox="0 0 79 86"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
:id="`linearGradient-1-${id}`"
|
||||
x1="38.8503086%"
|
||||
y1="0%"
|
||||
x2="61.1496914%"
|
||||
y2="100%"
|
||||
>
|
||||
<stop stop-color="#FCFCFD" offset="0%" />
|
||||
<stop stop-color="#EEEFF3" offset="100%" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
:id="`linearGradient-2-${id}`"
|
||||
x1="0%"
|
||||
y1="9.5%"
|
||||
x2="100%"
|
||||
y2="90.5%"
|
||||
>
|
||||
<stop stop-color="#FCFCFD" offset="0%" />
|
||||
<stop stop-color="#E9EBEF" offset="100%" />
|
||||
</linearGradient>
|
||||
<rect
|
||||
:id="`path-3-${id}`"
|
||||
x="0"
|
||||
y="0"
|
||||
width="17"
|
||||
height="36"
|
||||
/>
|
||||
</defs>
|
||||
<g
|
||||
id="Illustrations"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g id="B-type" transform="translate(-1268.000000, -535.000000)">
|
||||
<g id="Group-2" transform="translate(1268.000000, 535.000000)">
|
||||
<path
|
||||
id="Oval-Copy-2"
|
||||
d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z"
|
||||
fill="#F7F8FC"
|
||||
/>
|
||||
<polygon
|
||||
id="Rectangle-Copy-14"
|
||||
fill="#E5E7E9"
|
||||
transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) "
|
||||
points="13 58 53 58 42 45 2 45"
|
||||
/>
|
||||
<g
|
||||
id="Group-Copy"
|
||||
transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"
|
||||
>
|
||||
<polygon
|
||||
id="Rectangle-Copy-10"
|
||||
fill="#E5E7E9"
|
||||
transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) "
|
||||
points="2.84078316e-14 3 18 3 23 7 5 7"
|
||||
/>
|
||||
<polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43" />
|
||||
<rect
|
||||
id="Rectangle-Copy-12"
|
||||
:fill="`url(#linearGradient-1-${id})`"
|
||||
transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) "
|
||||
x="38"
|
||||
y="7"
|
||||
width="17"
|
||||
height="36"
|
||||
/>
|
||||
<polygon
|
||||
id="Rectangle-Copy-13"
|
||||
fill="#F8F9FB"
|
||||
transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) "
|
||||
points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"
|
||||
/>
|
||||
</g>
|
||||
<rect
|
||||
id="Rectangle-Copy-15"
|
||||
:fill="`url(#linearGradient-2-${id})`"
|
||||
x="13"
|
||||
y="45"
|
||||
width="40"
|
||||
height="36"
|
||||
/>
|
||||
<g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)">
|
||||
<mask :id="`mask-4-${id}`" fill="white">
|
||||
<use :xlink:href="`#path-3-${id}`" />
|
||||
</mask>
|
||||
<use
|
||||
id="Mask"
|
||||
fill="#E0E3E9"
|
||||
transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) "
|
||||
:xlink:href="`#path-3-${id}`"
|
||||
/>
|
||||
<polygon
|
||||
id="Rectangle-Copy"
|
||||
fill="#D5D7DE"
|
||||
:mask="`url(#mask-4-${id})`"
|
||||
transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) "
|
||||
points="7 0 24 0 20 18 -1.70530257e-13 16"
|
||||
/>
|
||||
</g>
|
||||
<polygon
|
||||
id="Rectangle-Copy-18"
|
||||
fill="#F8F9FB"
|
||||
transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) "
|
||||
points="62 45 79 45 70 58 53 58"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let id = 0;
|
||||
export default {
|
||||
name: 'ImgEmpty',
|
||||
data() {
|
||||
return {
|
||||
id: ++id
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div class="el-empty">
|
||||
<div class="el-empty__image" :style="imageStyle">
|
||||
<img v-if="image" :src="image" ondragstart="return false">
|
||||
<slot v-else name="image">
|
||||
<img-empty />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="el-empty__description">
|
||||
<slot v-if="$slots.description" name="description"></slot>
|
||||
<p v-else>{{ emptyDescription }}</p>
|
||||
</div>
|
||||
<div v-if="$slots.default" class="el-empty__bottom">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgEmpty from './img-empty.vue';
|
||||
import { t } from 'element-ui/src/locale';
|
||||
|
||||
export default {
|
||||
name: 'ElEmpty',
|
||||
components: {
|
||||
[ImgEmpty.name]: ImgEmpty
|
||||
},
|
||||
props: {
|
||||
image: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
imageSize: Number,
|
||||
description: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
emptyDescription() {
|
||||
return this.description || t('el.empty.description');
|
||||
},
|
||||
imageStyle() {
|
||||
return {
|
||||
width: this.imageSize ? `${this.imageSize}px` : ''
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -964,6 +964,12 @@ $--avatar-medium-size: 36px !default;
|
|||
/// size|1|Avatar Size|3
|
||||
$--avatar-small-size: 28px !default;
|
||||
|
||||
/* Empty
|
||||
-------------------------- */
|
||||
$--empty-padding: 40px 0 !default;
|
||||
$--empty-image-width: 160px !default;
|
||||
$--empty-description-margin-top: 20px !default;
|
||||
$--empty-bottom-margin-top: 20px !default;
|
||||
|
||||
/* Skeleton
|
||||
--------------------------*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(empty) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: $--empty-padding;
|
||||
|
||||
@include e(image) {
|
||||
width: $--empty-image-width;
|
||||
|
||||
img {
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $--svg-monochrome-grey;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(description) {
|
||||
margin-top: $--empty-description-margin-top;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $--font-size-base;
|
||||
color: $--color-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(bottom) {
|
||||
margin-top: $--empty-bottom-margin-top;
|
||||
}
|
||||
}
|
||||
|
|
@ -80,3 +80,4 @@
|
|||
@import "./popconfirm.scss";
|
||||
@import "./skeleton.scss";
|
||||
@import "./skeleton-item.scss";
|
||||
@import "./empty.scss";
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ import Drawer from '../packages/drawer/index.js';
|
|||
import Popconfirm from '../packages/popconfirm/index.js';
|
||||
import Skeleton from '../packages/skeleton/index.js';
|
||||
import SkeletonItem from '../packages/skeleton-item/index.js';
|
||||
import Empty from '../packages/empty/index.js';
|
||||
import locale from 'element-ui/src/locale';
|
||||
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
|
||||
|
||||
|
|
@ -167,6 +168,7 @@ const components = [
|
|||
Popconfirm,
|
||||
Skeleton,
|
||||
SkeletonItem,
|
||||
Empty,
|
||||
CollapseTransition
|
||||
];
|
||||
|
||||
|
|
@ -290,5 +292,6 @@ export default {
|
|||
Drawer,
|
||||
Popconfirm,
|
||||
Skeleton,
|
||||
SkeletonItem
|
||||
SkeletonItem,
|
||||
Empty
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Geen Data'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -114,6 +114,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'تأكيد',
|
||||
cancelButtonText: 'إلغاء'
|
||||
},
|
||||
empty: {
|
||||
description: 'لايوجد بيانات'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Няма данни'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -114,6 +114,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Si',
|
||||
cancelButtonText: 'No'
|
||||
},
|
||||
empty: {
|
||||
description: 'Sense Dades'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -117,6 +117,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Žádná data'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -114,6 +114,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Ingen data'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -116,6 +116,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Keine Daten'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Andmed puuduvad'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Χωρίς Δεδομένα'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes',
|
||||
cancelButtonText: 'No'
|
||||
},
|
||||
empty: {
|
||||
description: 'No Data'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Neniuj datumoj'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -114,6 +114,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Si',
|
||||
cancelButtonText: 'No'
|
||||
},
|
||||
empty: {
|
||||
description: 'Sin Datos'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Daturik ez'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'اطلاعاتی وجود ندارد'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Ei tietoja'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -114,6 +114,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Aucune donnée'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'אין נתונים'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Nema podataka'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -114,6 +114,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Nincs adat'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Տուեալներ չկան'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Ya',
|
||||
cancelButtonText: 'Tidak'
|
||||
},
|
||||
empty: {
|
||||
description: 'Tidak ada data'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -114,6 +114,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Nessun dato'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'データなし'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'маалымат жок'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'ព្រម',
|
||||
cancelButtonText: 'មិនព្រម'
|
||||
},
|
||||
empty: {
|
||||
description: 'គ្មានទិន្ន័យ'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: '데이터 없음'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Agahî tune'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Деректер жоқ'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Duomenų nerasta'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Nav datu'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Өгөгдөл байхгүй'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -114,6 +114,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Ingen Data'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Geen data'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Brak danych'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Sim',
|
||||
cancelButtonText: 'Não'
|
||||
},
|
||||
empty: {
|
||||
description: 'Sem dados'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Sem dados'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Nu există date'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Отмена'
|
||||
},
|
||||
empty: {
|
||||
description: 'Нет данных'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -117,6 +117,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Žiadne dáta'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Ni podatkov'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Нема података'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Ja',
|
||||
cancelButtonText: 'Nej'
|
||||
},
|
||||
empty: {
|
||||
description: 'Inga Data'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -114,6 +114,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'தரவு இல்லை'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'ไม่พบข้อมูล'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Maglumat ýok'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Veri yok'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Так',
|
||||
cancelButtonText: 'Ні'
|
||||
},
|
||||
empty: {
|
||||
description: 'Немає даних'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'ھەئە',
|
||||
cancelButtonText: 'ياق'
|
||||
},
|
||||
empty: {
|
||||
description: 'ئۇچۇر يوق'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: 'Boʻsh'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Ok',
|
||||
cancelButtonText: 'Huỷ'
|
||||
},
|
||||
empty: {
|
||||
description: 'Không có dữ liệu'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
},
|
||||
empty: {
|
||||
description: '暂无数据'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,6 +115,9 @@ export default {
|
|||
popconfirm: {
|
||||
confirmButtonText: 'Yes', // to be translated
|
||||
cancelButtonText: 'No' // to be translated
|
||||
},
|
||||
empty: {
|
||||
description: '暫無資料'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
import { createVue, createTest, destroyVM, waitImmediate } from '../util';
|
||||
import Empty from 'packages/empty';
|
||||
|
||||
const AXIOM = 'Rem is the best girl';
|
||||
|
||||
describe('Empty', () => {
|
||||
let vm;
|
||||
afterEach(() => {
|
||||
destroyVM(vm);
|
||||
});
|
||||
it('render test', () => {
|
||||
vm = createVue({
|
||||
template: '<el-empty>{{ AXIOM }}</el-empty>',
|
||||
data() {
|
||||
return {
|
||||
AXIOM
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
expect(vm.$el.querySelector('.el-empty__image')).to.exist;
|
||||
expect(vm.$el.querySelector('.el-empty__description')).to.exist;
|
||||
expect(vm.$el.querySelector('.el-empty__bottom')).to.exist;
|
||||
});
|
||||
|
||||
it('should render image props', () => {
|
||||
vm = createTest(Empty, {
|
||||
image: AXIOM
|
||||
}, true);
|
||||
expect(vm.$el.querySelector('.el-empty__image img')).to.exist;
|
||||
});
|
||||
|
||||
it('should render imageSize props', async() => {
|
||||
vm = createVue({
|
||||
template: '<el-empty :image-size="imageSize"></el-empty>',
|
||||
data() {
|
||||
return {
|
||||
imageSize: 500
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
expect(vm.$el.querySelector('.el-empty__image').getAttribute('style')).to.contain('width: 500px');
|
||||
vm.imageSize = 200;
|
||||
await waitImmediate();
|
||||
expect(vm.$el.querySelector('.el-empty__image').getAttribute('style')).to.contain('width: 200px');
|
||||
});
|
||||
|
||||
it('should render description props', () => {
|
||||
vm = createTest(Empty, {
|
||||
description: AXIOM
|
||||
}, true);
|
||||
expect(vm.$el.querySelector('.el-empty__description').innerText).to.equal(AXIOM);
|
||||
});
|
||||
|
||||
it('should render image slots', () => {
|
||||
vm = createVue({
|
||||
template: '<el-empty><template slot="image">{{AXIOM}}</template></el-empty>',
|
||||
data() {
|
||||
return {
|
||||
AXIOM
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
expect(vm.$el.querySelector('.el-empty__image').innerText).to.equal(AXIOM);
|
||||
});
|
||||
|
||||
it('should render description slots', () => {
|
||||
vm = createVue({
|
||||
template: '<el-empty><template slot="description">{{AXIOM}}</template></el-empty>',
|
||||
data() {
|
||||
return {
|
||||
AXIOM
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
expect(vm.$el.querySelector('.el-empty__description').innerText).to.equal(AXIOM);
|
||||
});
|
||||
|
||||
it('should render default slots', () => {
|
||||
vm = createVue({
|
||||
template: '<el-empty>{{AXIOM}}</el-empty>',
|
||||
data() {
|
||||
return {
|
||||
AXIOM
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
expect(vm.$el.querySelector('.el-empty__bottom').innerText).to.equal(AXIOM);
|
||||
});
|
||||
});
|
||||
|
|
@ -82,6 +82,7 @@ import { ElDrawer } from './drawer'
|
|||
import { ElPopconfirm } from './popconfirm'
|
||||
import { ElSkeleton } from './skeleton'
|
||||
import { ElSkeletonItem } from './skeleton-item'
|
||||
import { ElEmpty } from './empty'
|
||||
|
||||
export interface InstallationOptions {
|
||||
locale: any,
|
||||
|
|
@ -352,3 +353,6 @@ export class Skeleton extends ElSkeleton {}
|
|||
|
||||
/** Skeleton Item Component */
|
||||
export class SkeletonItem extends ElSkeletonItem {}
|
||||
|
||||
/** Empty Component */
|
||||
export class Empty extends ElEmpty {}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
import { ElementUIComponent } from './component'
|
||||
import { VNode } from 'vue'
|
||||
|
||||
interface ELEmptySlots {
|
||||
/* default slot: Custom bottom content */
|
||||
default: VNode[]
|
||||
|
||||
/* image slot: Custom image */
|
||||
image: VNode[]
|
||||
|
||||
/* description slot: Custom description */
|
||||
description: VNode[]
|
||||
|
||||
|
||||
[key: string]: VNode[]
|
||||
}
|
||||
|
||||
/** Placeholder hints for empty states. */
|
||||
export declare class ElEmpty extends ElementUIComponent {
|
||||
/* image URL */
|
||||
image: string
|
||||
|
||||
/* image size (width) */
|
||||
imageSize: number
|
||||
|
||||
/* description */
|
||||
description: string
|
||||
|
||||
$slots: ELEmptySlots
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue