feat: config-provider getPopupContainer add dialogContext

pull/1483/head
tangjinzhou 2019-11-26 22:00:30 +08:00
parent 74f5d9f10b
commit 7a3c881075
5 changed files with 49 additions and 11 deletions

View File

@ -3,9 +3,24 @@
This component provides a configuration to all Vue components underneath itself via the [provide / inject](https://vuejs.org/v2/api/#provide-inject), In the render tree all components will have access to the provided config.
```html
<a-config-provider :getPopupContainer="getPopupContainer">
<app />
</a-config-provider>
<template>
<a-config-provider :getPopupContainer="getPopupContainer">
<app />
</a-config-provider>
</template>
<script>
export default {
methods: {
getPopupContainer(el, dialogContext) {
if(dialogContext) {
return dialogContext.$refs.wrap;
} else {
return document.body;
}
},
},
};
</script>
```
### Content Security Policy
@ -25,5 +40,5 @@ Some component use dynamic style to support wave effect. You can config `csp` pr
| autoInsertSpaceInButton | Set `false` to remove space between 2 chinese characters on Button | boolean | true |
| csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |
| renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | slot-scope \| Function(componentName: string): ReactNode | - |
| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` |
| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode, dialogContext) | `() => document.body` |
| prefixCls | set prefix class | string | ant |

View File

@ -3,9 +3,24 @@
ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provide-inject) 特性,只需在应用外围包裹一次即可全局生效。
```html
<a-config-provider :getPopupContainer="getPopupContainer">
<app />
</a-config-provider>
<template>
<a-config-provider :getPopupContainer="getPopupContainer">
<app />
</a-config-provider>
</template>
<script>
export default {
methods: {
getPopupContainer(el, dialogContext) {
if(dialogContext) {
return dialogContext.$refs.wrap;
} else {
return document.body;
}
},
},
};
</script>
```
### Content Security Policy
@ -25,5 +40,5 @@ ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provi
| autoInsertSpaceInButton | 设置为 `false` 时,移除按钮中 2 个汉字之间的空格 | boolean | true |
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | slot-scope \| Function(componentName: string): VNode | - |
| getPopupContainer | 弹出框Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。 | Function(triggerNode) | () => document.body |
| getPopupContainer | 弹出框Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。 | Function(triggerNode, dialogContext) | () => document.body |
| prefixCls | 设置统一样式前缀 | string | ant |

View File

@ -64,6 +64,12 @@ export default {
};
},
provide() {
return {
dialogContext: this,
};
},
watch: {
visible(val) {
if (val) {

View File

@ -78,6 +78,7 @@ export default {
inject: {
vcTriggerContext: { default: () => ({}) },
savePopupRef: { default: () => noop },
dialogContext: { default: () => null },
},
data() {
const props = this.$props;
@ -420,7 +421,7 @@ export default {
},
getContainer() {
const { $props: props } = this;
const { $props: props, dialogContext } = this;
const popupContainer = document.createElement('div');
// Make sure default popup container will never cause scrollbar appearing
// https://github.com/react-component/trigger/issues/41
@ -429,7 +430,7 @@ export default {
popupContainer.style.left = '0';
popupContainer.style.width = '100%';
const mountNode = props.getPopupContainer
? props.getPopupContainer(this.$el)
? props.getPopupContainer(this.$el, dialogContext)
: props.getDocument().body;
mountNode.appendChild(popupContainer);
this.popupContainer = popupContainer;

View File

@ -1,4 +1,5 @@
import { AntdComponent } from './component';
import Vue from 'vue';
import { Locale } from './locale-provider';
@ -7,7 +8,7 @@ export interface CSPConfig {
}
export declare class ConfigProvider extends AntdComponent {
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
getPopupContainer?: (triggerNode: HTMLElement, dialogContext?: Vue | null) => HTMLElement;
getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
renderEmpty: Function;
csp?: CSPConfig;