feat: config-provider getPopupContainer add dialogContext
parent
74f5d9f10b
commit
7a3c881075
|
@ -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 |
|
||||
|
|
|
@ -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 |
|
||||
|
|
|
@ -64,6 +64,12 @@ export default {
|
|||
};
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
dialogContext: this,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
visible(val) {
|
||||
if (val) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue