wangxueliang
6 years ago
parent
995db39fa5
commit
08aef845d1
|
After Width: | Height: | Size: 1.8 KiB |
@ -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