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.
|
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
|
||||||
|
<template>
|
||||||
<a-config-provider :getPopupContainer="getPopupContainer">
|
<a-config-provider :getPopupContainer="getPopupContainer">
|
||||||
<app />
|
<app />
|
||||||
</a-config-provider>
|
</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 |
|
||||||
|
|
|
@ -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
|
||||||
|
<template>
|
||||||
<a-config-provider :getPopupContainer="getPopupContainer">
|
<a-config-provider :getPopupContainer="getPopupContainer">
|
||||||
<app />
|
<app />
|
||||||
</a-config-provider>
|
</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 |
|
||||||
|
|
|
@ -64,6 +64,12 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
dialogContext: this,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
visible(val) {
|
visible(val) {
|
||||||
if (val) {
|
if (val) {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue