@@ -43,8 +66,16 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
-
@@ -79,7 +110,15 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
@@ -94,7 +133,15 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
@@ -107,8 +154,44 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
exports[`renders ./components/empty/demo/customize.md correctly 1`] = `
`;
+
+exports[`renders ./components/empty/demo/description.md correctly 1`] = `
+
+
+
+`;
+
+exports[`renders ./components/empty/demo/simple.md correctly 1`] = `
+
+`;
diff --git a/components/empty/demo/customize.md b/components/empty/demo/customize.md
index b5a546712..ae93fe092 100644
--- a/components/empty/demo/customize.md
+++ b/components/empty/demo/customize.md
@@ -12,6 +12,9 @@ Customize image, description and extra content.
Customize Description
Create Now
diff --git a/components/empty/demo/description.md b/components/empty/demo/description.md
new file mode 100644
index 000000000..32c3ad231
--- /dev/null
+++ b/components/empty/demo/description.md
@@ -0,0 +1,15 @@
+
+#### 无描述
+无描述展示。
+
+
+
+#### No description
+Simplest Usage with no description.
+
+
+```tpl
+
+
+
+```
diff --git a/components/empty/demo/index.vue b/components/empty/demo/index.vue
index ee0fa142e..c4c51800c 100644
--- a/components/empty/demo/index.vue
+++ b/components/empty/demo/index.vue
@@ -2,6 +2,8 @@
import Basic from './basic';
import ConfigProvider from './config-provider';
import Customize from './customize';
+import Description from './description';
+import Simple from './simple';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
@@ -16,7 +18,8 @@ const md = {
## 何时使用
- 当目前没有数据时，用于显式的用户提示。
+ - 当目前没有数据时，用于显式的用户提示。
+ - 初始化场景时的引导创建流程。
## 代码演示
`,
@@ -25,7 +28,8 @@ const md = {
## When To Use
- When there is no data provided, display for friendly tips.
+ - When there is no data provided, display for friendly tips.
+ - User tutorial to create something in fresh new situation.
## Examples
`,
};
@@ -41,6 +45,8 @@ export default {
+
+
diff --git a/components/empty/demo/simple.md b/components/empty/demo/simple.md
new file mode 100644
index 000000000..01fde72aa
--- /dev/null
+++ b/components/empty/demo/simple.md
@@ -0,0 +1,23 @@
+
+#### 选择图片
+可以通过设置 `image` 为 `Empty.PRESENTED_IMAGE_SIMPLE` 选择另一种风格的图片。
+
+
+
+#### Chose image
+You can choose another style of `image` by setting image to `Empty.PRESENTED_IMAGE_SIMPLE`.
+
+
+```tpl
+
+
+
+
+```
diff --git a/components/empty/empty.jsx b/components/empty/empty.jsx
new file mode 100644
index 000000000..d1ddca6a3
--- /dev/null
+++ b/components/empty/empty.jsx
@@ -0,0 +1,47 @@
+export default {
+ functional: true,
+ PRESENTED_IMAGE_DEFAULT: true,
+ render() {
+ return (
+
+ );
+ },
+};
diff --git a/components/empty/empty.svg b/components/empty/empty.svg
deleted file mode 100644
index 55e40af09..000000000
--- a/components/empty/empty.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-
diff --git a/components/empty/index.en-US.md b/components/empty/index.en-US.md
index 895326e9c..cbac00e29 100644
--- a/components/empty/index.en-US.md
+++ b/components/empty/index.en-US.md
@@ -6,7 +6,18 @@
```
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| description | Customize description | string \| v-slot | - |
-| image | Customize image. Will tread as image url when string provided | string \| v-slot | false |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| description | Customize description | string \| v-slot | - | |
+| imageStyle | style of image | CSSProperties | - | 1.5.0 |
+| image | Customize image. Will tread as image url when string provided | string \| v-slot | false | |
+
+## Built-in images
+
+- Empty.PRESENTED_IMAGE_SIMPLE
+
+ 
+
+- Empty.PRESENTED_IMAGE_DEFAULT
+
+ 
diff --git a/components/empty/index.jsx b/components/empty/index.jsx
index 1e0f97196..2501864ed 100644
--- a/components/empty/index.jsx
+++ b/components/empty/index.jsx
@@ -2,7 +2,8 @@ import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider';
import { getComponentFromProp, getListeners } from '../_util/props-util';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import emptyImg from './empty.svg';
+import DefaultEmptyImg from './empty';
+import SimpleEmptyImg from './simple';
import Base from '../base';
export const TransferLocale = () => {
@@ -16,6 +17,7 @@ export const EmptyProps = () => {
prefixCls: PropTypes.string,
image: PropTypes.any,
description: PropTypes.any,
+ imageStyle: PropTypes.object,
};
};
@@ -26,26 +28,30 @@ const Empty = {
},
methods: {
renderEmpty(contentLocale) {
- const { prefixCls: customizePrefixCls, ...restProps } = this.$props;
+ const { prefixCls: customizePrefixCls, imageStyle } = this.$props;
const prefixCls = ConfigConsumerProps.getPrefixCls('empty', customizePrefixCls);
- const image = getComponentFromProp(this, 'image');
+ const image = getComponentFromProp(this, 'image') || ;
const description = getComponentFromProp(this, 'description');
- const des = description || contentLocale.description;
+ const des = typeof description !== 'undefined' ? description : contentLocale.description;
const alt = typeof des === 'string' ? des : 'empty';
-
+ const cls = { [prefixCls]: true };
let imageNode = null;
- if (!image) {
- imageNode = 
;
- } else if (typeof image === 'string') {
+ if (typeof image === 'string') {
imageNode = 
;
+ } else if (typeof image === 'object' && image.PRESENTED_IMAGE_SIMPLE) {
+ const Image = image;
+ imageNode = ;
+ cls[`${prefixCls}-normal`] = true;
} else {
imageNode = image;
}
return (
-
-
{imageNode}
-
{des}
+
+
+ {imageNode}
+
+ {des &&
{des}
}
{this.$slots.default && }
);
@@ -56,6 +62,9 @@ const Empty = {
},
};
+Empty.PRESENTED_IMAGE_DEFAULT = DefaultEmptyImg;
+Empty.PRESENTED_IMAGE_SIMPLE = SimpleEmptyImg;
+
/* istanbul ignore next */
Empty.install = function(Vue) {
Vue.use(Base);
diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md
index d24f86004..fced9a031 100644
--- a/components/empty/index.zh-CN.md
+++ b/components/empty/index.zh-CN.md
@@ -6,7 +6,18 @@
```
-| 参数 | 说明 | 类型 | 默认值 |
-| ----------- | -------------------------------------------- | ---------------- | ------ |
-| description | 自定义描述内容 | string \| v-slot | - |
-| image | 设置显示图片，为 string 时表示自定义图片地址 | string \| v-slot | false |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| ----------- | -------------------------------------------- | ---------------- | ------ | ----- |
+| description | 自定义描述内容 | string \| v-slot | - | |
+| imageStyle | 图片样式 | CSSProperties | - | 1.5.0 |
+| image | 设置显示图片，为 string 时表示自定义图片地址 | string \| v-slot | false | |
+
+## 内置图片 (1.5.0 以上版本)
+
+- Empty.PRESENTED_IMAGE_SIMPLE
+
+
+
+- Empty.PRESENTED_IMAGE_DEFAULT
+
+
diff --git a/components/empty/simple.jsx b/components/empty/simple.jsx
new file mode 100644
index 000000000..4c35a1223
--- /dev/null
+++ b/components/empty/simple.jsx
@@ -0,0 +1,20 @@
+export default {
+ functional: true,
+ PRESENTED_IMAGE_SIMPLE: true,
+ render() {
+ return (
+
+ );
+ },
+};
diff --git a/types/empty.d.ts b/types/empty.d.ts
index 7f471f688..77b940ac6 100644
--- a/types/empty.d.ts
+++ b/types/empty.d.ts
@@ -18,4 +18,5 @@ export declare class Empty extends AntdComponent {
* @type string | VNode
*/
image: string | VNode;
+ imageStyle: object;
}
