feat: update config-provider && empty demo
wangxueliang
parent
995db39fa5
commit
08aef845d1
|
|
@ -0,0 +1,16 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,17 +1,41 @@
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import { filterEmpty } from '../_util/props-util';
|
||||
import defaultRenderEmpty from './renderEmpty';
|
||||
|
||||
const ConfigProvider = {
|
||||
name: 'AConfigProvider',
|
||||
props: {
|
||||
getPopupContainer: PropTypes.func,
|
||||
prefixCls: PropTypes.string,
|
||||
renderEmpty: PropTypes.any,
|
||||
csp: PropTypes.any,
|
||||
autoInsertSpaceInButton: PropTypes.bool,
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
configProvider: this.$props,
|
||||
configProvider: {
|
||||
...this.$props,
|
||||
renderEmpty: this.$props.renderEmpty || this.$slots.renderEmpty || defaultRenderEmpty,
|
||||
getPrefixCls: this.getPrefixCls,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getPrefixCls(suffixCls, customizePrefixCls) {
|
||||
const { prefixCls = 'ant' } = this.$props;
|
||||
if (customizePrefixCls) return customizePrefixCls;
|
||||
return suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls;
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return this.$slots.default ? this.$slots.default[0] : null;
|
||||
return this.$slots.default ? filterEmpty(this.$slots.default) : null;
|
||||
},
|
||||
};
|
||||
|
||||
export const ConfigConsumerProps = {
|
||||
getPrefixCls: (suffixCls, customizePrefixCls) => {
|
||||
if (customizePrefixCls) return customizePrefixCls;
|
||||
return `ant-${suffixCls}`;
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import { getComponentFromProp } from '../_util/props-util';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import emptyImg from './empty.svg';
|
||||
|
|
@ -29,10 +29,7 @@ const Empty = {
|
|||
prefixCls: customizePrefixCls,
|
||||
...restProps
|
||||
} = this.$props;
|
||||
|
||||
// todo
|
||||
// const prefixCls = getPrefixCls('empty', customizePrefixCls);
|
||||
const prefixCls = customizePrefixCls || 'ant-empty';
|
||||
const prefixCls = ConfigConsumerProps.getPrefixCls('empty', customizePrefixCls);
|
||||
const image = getComponentFromProp(this, 'image');
|
||||
const description = getComponentFromProp(this, 'description');
|
||||
|
||||
|
|
@ -54,7 +51,7 @@ const Empty = {
|
|||
|
||||
<p class={`${prefixCls}-description`}>{des}</p>
|
||||
|
||||
{this.$slots.default && <div class={`${prefixCls}-footer`}>{this.$slots.default[0]}</div>}
|
||||
{this.$slots.default && <div class={`${prefixCls}-footer`}>{this.$slots.default}</div>}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -372,7 +372,7 @@ export default {
|
|||
return (
|
||||
<Trigger {...triggerProps}>
|
||||
{children &&
|
||||
cloneElement(children[0], {
|
||||
cloneElement(children, {
|
||||
on: {
|
||||
keydown: handleKeyDown,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1488,7 +1488,6 @@ const Select = {
|
|||
},
|
||||
|
||||
render() {
|
||||
console.log('12');
|
||||
const props = this.$props;
|
||||
const multiple = isMultipleOrTags(props);
|
||||
// Default set showArrow to true if not set (not set directly in defaultProps to handle multiple case)
|
||||
|
|
|
|||
Loading…
Reference in New Issue