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. 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 ```html
<a-config-provider :getPopupContainer="getPopupContainer"> <template>
<app /> <a-config-provider :getPopupContainer="getPopupContainer">
</a-config-provider> <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 ### 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 | | 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 } | - | | 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 | - | | 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 | | prefixCls | set prefix class | string | ant |

View File

@ -3,9 +3,24 @@
ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provide-inject) 特性,只需在应用外围包裹一次即可全局生效。 ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provide-inject) 特性,只需在应用外围包裹一次即可全局生效。
```html ```html
<a-config-provider :getPopupContainer="getPopupContainer"> <template>
<app /> <a-config-provider :getPopupContainer="getPopupContainer">
</a-config-provider> <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 ### Content Security Policy
@ -25,5 +40,5 @@ ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provi
| autoInsertSpaceInButton | 设置为 `false` 时,移除按钮中 2 个汉字之间的空格 | boolean | true | | autoInsertSpaceInButton | 设置为 `false` 时,移除按钮中 2 个汉字之间的空格 | boolean | true |
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | | 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 | - | | 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 | | prefixCls | 设置统一样式前缀 | string | ant |

View File

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

View File

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

View File

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