wangxueliang
6 years ago
8 changed files with 186 additions and 10 deletions
@ -0,0 +1,34 @@
|
||||
import PropTypes from '../_util/vue-types'; |
||||
import Empty from '../empty'; |
||||
import emptyImg from './empty.svg'; |
||||
|
||||
const renderEmpty = { |
||||
functional: true, |
||||
inject: ['configProvider'], |
||||
props: { |
||||
componentName: PropTypes.string, |
||||
}, |
||||
render(createElement, context) { |
||||
const { props, injections } = context; |
||||
function renderHtml(componentName) { |
||||
const prefix = injections.configProvider.getPrefixCls('empty'); |
||||
switch (componentName) { |
||||
case 'Table': |
||||
case 'List': |
||||
return <Empty image={emptyImg} className={`${prefix}-normal`} />; |
||||
|
||||
case 'Select': |
||||
case 'TreeSelect': |
||||
case 'Cascader': |
||||
case 'Transfer': |
||||
return <Empty image={emptyImg} className={`${prefix}-small`} />; |
||||
|
||||
default: |
||||
return <Empty />; |
||||
} |
||||
} |
||||
return renderHtml(props.componentName); |
||||
}, |
||||
}; |
||||
|
||||
export default renderEmpty; |
||||
@ -0,0 +1,84 @@
|
||||
<cn> |
||||
#### 全局化配置 |
||||
自定义全局组件的 Empty 样式。 |
||||
</cn> |
||||
|
||||
<us> |
||||
#### ConfigProvider |
||||
Use ConfigProvider set global Empty style. |
||||
</us> |
||||
|
||||
```html |
||||
<template> |
||||
<div> |
||||
<a-switch |
||||
unCheckedChildren="default" |
||||
checkedChildren="customize" |
||||
:checked="customize" |
||||
@change="(val) => customize = val" |
||||
/> |
||||
|
||||
<a-divider /> |
||||
<a-config-provider> |
||||
<template v-if="customize"> |
||||
<div slot="renderEmpty" style="textAlign: center"> |
||||
<a-icon type="smile" style="fontSize: 20px" /> |
||||
<p>Data Not Found</p> |
||||
</div> |
||||
</template> |
||||
<div class="config-provider"> |
||||
<h3>Select</h3> |
||||
<a-select :style="style" /> |
||||
|
||||
<h3>TreeSelect</h3> |
||||
<a-tree-select :style="style" :treeData="[]" /> |
||||
|
||||
<h3>Cascader</h3> |
||||
<a-cascader :style="style" :options="[]" :showSearch="true" /> |
||||
|
||||
<h3>Transfer</h3> |
||||
<a-transfer /> |
||||
|
||||
<h3>Table</h3> |
||||
<a-table |
||||
style="marginTop: 8px" |
||||
:columns="columns" |
||||
/> |
||||
<h3>List</h3> |
||||
<a-list /> |
||||
</div> |
||||
</a-config-provider> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
customize: false, |
||||
style: {width: '200px'}, |
||||
columns: [ |
||||
{ |
||||
title: 'Name', |
||||
dataIndex: 'name', |
||||
key: 'name', |
||||
}, |
||||
{ |
||||
title: 'Age', |
||||
dataIndex: 'age', |
||||
key: 'age', |
||||
}, |
||||
] |
||||
} |
||||
}, |
||||
} |
||||
|
||||
</script> |
||||
<style> |
||||
.code-box-demo .config-provider h3 { |
||||
font-size: inherit; |
||||
margin: 16px 0 8px 0; |
||||
} |
||||
</style> |
||||
``` |
||||
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
<cn> |
||||
#### 自定义 |
||||
自定义图片、描述、附属内容。 |
||||
</cn> |
||||
|
||||
<us> |
||||
#### Customize |
||||
Customize image, description and extra content. |
||||
</us> |
||||
|
||||
```html |
||||
<template> |
||||
<a-empty |
||||
image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" |
||||
> |
||||
<span slot="description"> |
||||
Customize <a href="#API">Description</a> |
||||
</span> |
||||
<a-button type="primary">Create Now</a-button> |
||||
</a-empty> |
||||
</template> |
||||
``` |
||||
Loading…
Reference in new issue