github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update empty

pull/1790/head
tangjinzhou 2020-02-14 18:56:40 +08:00
parent b388379bcc
commit 2e61889cf7
13 changed files with 260 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
dev: { dev: {
componentName: 'dropdown', // dev components componentName: 'empty', // dev components
}, },
}; };

101
components/empty/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2,14 +2,29 @@
exports[`renders ./components/empty/demo/basic.md correctly 1`] = ` exports[`renders ./components/empty/demo/basic.md correctly 1`] = `
<div class="ant-empty"> <div class="ant-empty">
<div class="ant-empty-image"><img alt="No Data" src=""></div> <div class="ant-empty-image"><svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<g transform="translate(24 31.67)">
<ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
<path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path>
<path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path>
<path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path>
<path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path>
</g>
<path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path>
<g transform="translate(149.65 15.383)" fill="#FFF">
<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p> <p class="ant-empty-description">No Data</p>
</div> </div>
`; `;
exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = ` exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
<div><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner">default</span></button> <div><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner">default</span></button>
<div class="ant-divider ant-divider-horizontal"></div> <div role="separator" class="ant-divider ant-divider-horizontal"></div>
<div class="config-provider"> <div class="config-provider">
<h3>Select</h3> <h3>Select</h3>
<div tabindex="0" class="ant-select ant-select-enabled" style="width: 200px;"> <div tabindex="0" class="ant-select ant-select-enabled" style="width: 200px;">
@ -27,8 +42,16 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span></div> <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span></div>
<div class="ant-transfer-list-body"> <div class="ant-transfer-list-body">
<div class="ant-transfer-list-body-not-found"> <div class="ant-transfer-list-body-not-found">
<div class="ant-empty ant-empty-small"> <div class="ant-empty ant-empty-normal ant-empty-small">
<div class="ant-empty-image"><img alt="No Data" src=""></div> <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 1)" fill="none" fillRule="evenodd">
<ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g fillRule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p> <p class="ant-empty-description">No Data</p>
</div> </div>
</div> </div>
@ -43,8 +66,16 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span></div> <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span></div>
<div class="ant-transfer-list-body"> <div class="ant-transfer-list-body">
<div class="ant-transfer-list-body-not-found"> <div class="ant-transfer-list-body-not-found">
<div class="ant-empty ant-empty-small"> <div class="ant-empty ant-empty-normal ant-empty-small">
<div class="ant-empty-image"><img alt="No Data" src=""></div> <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 1)" fill="none" fillRule="evenodd">
<ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g fillRule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p> <p class="ant-empty-description">No Data</p>
</div> </div>
</div> </div>
@ -79,7 +110,15 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
</div> </div>
<div class="ant-table-placeholder"> <div class="ant-table-placeholder">
<div class="ant-empty ant-empty-normal"> <div class="ant-empty ant-empty-normal">
<div class="ant-empty-image"><img alt="No Data" src=""></div> <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 1)" fill="none" fillRule="evenodd">
<ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g fillRule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p> <p class="ant-empty-description">No Data</p>
</div> </div>
</div> </div>
@ -94,7 +133,15 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
<div class="ant-spin-container"> <div class="ant-spin-container">
<div class="ant-list-empty-text"> <div class="ant-list-empty-text">
<div class="ant-empty ant-empty-normal"> <div class="ant-empty ant-empty-normal">
<div class="ant-empty-image"><img alt="No Data" src=""></div> <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 1)" fill="none" fillRule="evenodd">
<ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g fillRule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p> <p class="ant-empty-description">No Data</p>
</div> </div>
</div> </div>
@ -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/customize.md correctly 1`] = `
<div class="ant-empty"> <div class="ant-empty">
<div class="ant-empty-image"><img alt="empty" src="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"></div> <div class="ant-empty-image" style="height: 60px;"><img alt="empty" src="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"></div>
<p class="ant-empty-description"><span> Customize <a href="#API">Description</a></span></p> <p class="ant-empty-description"><span> Customize <a href="#API">Description</a></span></p>
<div class="ant-empty-footer"> <button type="button" class="ant-btn ant-btn-primary"><span>Create Now</span></button></div> <div class="ant-empty-footer"> <button type="button" class="ant-btn ant-btn-primary"><span>Create Now</span></button></div>
</div> </div>
`; `;
exports[`renders ./components/empty/demo/description.md correctly 1`] = `
<div class="ant-empty">
<div class="ant-empty-image"><svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<g transform="translate(24 31.67)">
<ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
<path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path>
<path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path>
<path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path>
<path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path>
</g>
<path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path>
<g transform="translate(149.65 15.383)" fill="#FFF">
<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
</g>
</g>
</svg></div>
</div>
`;
exports[`renders ./components/empty/demo/simple.md correctly 1`] = `
<div class="ant-empty ant-empty-normal">
<div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 1)" fill="none" fillRule="evenodd">
<ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g fillRule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p>
</div>
`;

3
components/empty/demo/customize.md
View File

@ -12,6 +12,9 @@ Customize image, description and extra content.
<template> <template>
<a-empty <a-empty
image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
:imageStyle="{
height: '60px'
}"
> >
<span slot="description"> Customize <a href="#API">Description</a> </span> <span slot="description"> Customize <a href="#API">Description</a> </span>
<a-button type="primary">Create Now</a-button> <a-button type="primary">Create Now</a-button>

15
components/empty/demo/description.md Normal file
View File

@ -0,0 +1,15 @@
<cn>
#### 无描述
无描述展示。
</cn>
<us>
#### No description
Simplest Usage with no description.
</us>
```tpl
<template>
<a-empty :description="false" />
</template>
```

10
components/empty/demo/index.vue
View File

@ -2,6 +2,8 @@
import Basic from './basic'; import Basic from './basic';
import ConfigProvider from './config-provider'; import ConfigProvider from './config-provider';
import Customize from './customize'; import Customize from './customize';
import Description from './description';
import Simple from './simple';
import CN from '../index.zh-CN.md'; import CN from '../index.zh-CN.md';
import US from '../index.en-US.md'; import US from '../index.en-US.md';
@ -16,7 +18,8 @@ const md = {
## 何时使用 ## 何时使用
当目前没有数据时，用于显式的用户提示。 - 当目前没有数据时，用于显式的用户提示。
- 初始化场景时的引导创建流程。
## 代码演示 ## 代码演示
`, `,
@ -25,7 +28,8 @@ const md = {
## When To Use ## 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 ## Examples
`, `,
}; };
@ -41,6 +45,8 @@ export default {
<Basic /> <Basic />
<ConfigProvider /> <ConfigProvider />
<Customize /> <Customize />
<Description />
<Simple />
<api> <api>
<CN slot="cn" /> <CN slot="cn" />
<US /> <US />

23
components/empty/demo/simple.md Normal file
View File

@ -0,0 +1,23 @@
<cn>
#### 选择图片
可以通过设置 `image` 为 `Empty.PRESENTED_IMAGE_SIMPLE` 选择另一种风格的图片。
</cn>
<us>
#### Chose image
You can choose another style of `image` by setting image to `Empty.PRESENTED_IMAGE_SIMPLE`.
</us>
```tpl
<template>
<a-empty :image="simpleImage"/>
</template>
<script>
import { Empty } from 'ant-design-vue';
export default {
beforeCreate() {
this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
}
}
</script>
```

47
components/empty/empty.jsx Normal file
View File

@ -0,0 +1,47 @@
export default {
functional: true,
PRESENTED_IMAGE_DEFAULT: true,
render() {
return (
<svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<g transform="translate(24 31.67)">
<ellipse
fillOpacity=".8"
fill="#F5F5F7"
cx="67.797"
cy="106.89"
rx="67.797"
ry="12.668"
/>
<path
d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
fill="#AEB8C2"
/>
<path
d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
fill="url(#linearGradient-1)"
transform="translate(13.56)"
/>
<path
d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
fill="#F5F5F7"
/>
<path
d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
fill="#DCE0E6"
/>
</g>
<path
d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
fill="#DCE0E6"
/>
<g transform="translate(149.65 15.383)" fill="#FFF">
<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
</g>
</g>
</svg>
);
},
};

16
components/empty/empty.svg
View File

@ -1,16 +0,0 @@
<svg width="184" height="152" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<g transform="translate(24 31.67)">
<ellipse fill-opacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"/>
<path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"/>
<path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"/>
<path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"/>
<path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"/>
</g>
<path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"/>
<g transform="translate(149.65 15.383)" fill="#FFF">
<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"/>
<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

19
components/empty/index.en-US.md
View File

@ -6,7 +6,18 @@
</Empty> </Empty>
``` ```
| Property | Description | Type | Default | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| description | Customize description | string \| v-slot | - | | description | Customize description | string \| v-slot | - | |
| image | Customize image. Will tread as image url when string provided | string \| v-slot | false | | 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
<img src="https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png" height="35px">
- Empty.PRESENTED_IMAGE_DEFAULT
<img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" height="100px">

31
components/empty/index.jsx
View File

@ -2,7 +2,8 @@ import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import { getComponentFromProp, getListeners } from '../_util/props-util'; import { getComponentFromProp, getListeners } from '../_util/props-util';
import LocaleReceiver from '../locale-provider/LocaleReceiver'; import LocaleReceiver from '../locale-provider/LocaleReceiver';
import emptyImg from './empty.svg'; import DefaultEmptyImg from './empty';
import SimpleEmptyImg from './simple';
import Base from '../base'; import Base from '../base';
export const TransferLocale = () => { export const TransferLocale = () => {
@ -16,6 +17,7 @@ export const EmptyProps = () => {
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
image: PropTypes.any, image: PropTypes.any,
description: PropTypes.any, description: PropTypes.any,
imageStyle: PropTypes.object,
}; };
}; };
@ -26,26 +28,30 @@ const Empty = {
}, },
methods: { methods: {
renderEmpty(contentLocale) { renderEmpty(contentLocale) {
const { prefixCls: customizePrefixCls, ...restProps } = this.$props; const { prefixCls: customizePrefixCls, imageStyle } = this.$props;
const prefixCls = ConfigConsumerProps.getPrefixCls('empty', customizePrefixCls); const prefixCls = ConfigConsumerProps.getPrefixCls('empty', customizePrefixCls);
const image = getComponentFromProp(this, 'image'); const image = getComponentFromProp(this, 'image') || <DefaultEmptyImg />;
const description = getComponentFromProp(this, 'description'); 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 alt = typeof des === 'string' ? des : 'empty';
const cls = { [prefixCls]: true };
let imageNode = null; let imageNode = null;
if (!image) { if (typeof image === 'string') {
imageNode = <img alt={alt} src={emptyImg} />;
} else if (typeof image === 'string') {
imageNode = <img alt={alt} src={image} />; imageNode = <img alt={alt} src={image} />;
} else if (typeof image === 'object' && image.PRESENTED_IMAGE_SIMPLE) {
const Image = image;
imageNode = <Image />;
cls[`${prefixCls}-normal`] = true;
} else { } else {
imageNode = image; imageNode = image;
} }
return ( return (
<div class={prefixCls} {...{ on: getListeners(this) }}> <div class={cls} {...{ on: getListeners(this) }}>
<div class={`${prefixCls}-image`}>{imageNode}</div> <div class={`${prefixCls}-image`} style={imageStyle}>
<p class={`${prefixCls}-description`}>{des}</p> {imageNode}
</div>
{des && <p class={`${prefixCls}-description`}>{des}</p>}
{this.$slots.default && <div class={`${prefixCls}-footer`}>{this.$slots.default}</div>} {this.$slots.default && <div class={`${prefixCls}-footer`}>{this.$slots.default}</div>}
</div> </div>
); );
@ -56,6 +62,9 @@ const Empty = {
}, },
}; };
Empty.PRESENTED_IMAGE_DEFAULT = DefaultEmptyImg;
Empty.PRESENTED_IMAGE_SIMPLE = SimpleEmptyImg;
/* istanbul ignore next */ /* istanbul ignore next */
Empty.install = function(Vue) { Empty.install = function(Vue) {
Vue.use(Base); Vue.use(Base);

19
components/empty/index.zh-CN.md
View File

@ -6,7 +6,18 @@
</Empty> </Empty>
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | -------------------------------------------- | ---------------- | ------ | | ----------- | -------------------------------------------- | ---------------- | ------ | ----- |
| description | 自定义描述内容 | string \| v-slot | - | | description | 自定义描述内容 | string \| v-slot | - | |
| image | 设置显示图片，为 string 时表示自定义图片地址 | string \| v-slot | false | | imageStyle | 图片样式 | CSSProperties | - | 1.5.0 |
| image | 设置显示图片，为 string 时表示自定义图片地址 | string \| v-slot | false | |
## 内置图片 (1.5.0 以上版本)
- Empty.PRESENTED_IMAGE_SIMPLE
<img src="https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png" height="35px">
- Empty.PRESENTED_IMAGE_DEFAULT
<img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" height="100px">

20
components/empty/simple.jsx Normal file
View File

@ -0,0 +1,20 @@
export default {
functional: true,
PRESENTED_IMAGE_SIMPLE: true,
render() {
return (
<svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 1)" fill="none" fillRule="evenodd">
<ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7" />
<g fillRule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
<path
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
fill="#FAFAFA"
/>
</g>
</g>
</svg>
);
},
};

1
types/empty.d.ts vendored
View File

@ -18,4 +18,5 @@ export declare class Empty extends AntdComponent {
* @type string | VNode * @type string | VNode
*/ */
image: string | VNode; image: string | VNode;
imageStyle: object;
} }