You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design-vue/components/vc-dialog/DialogWrap.tsx

75 lines
2.1 KiB

import Dialog from './Dialog';
import type { IDialogChildProps } from './IDialogPropTypes';
import getDialogPropTypes from './IDialogPropTypes';
import Portal from '../_util/PortalWrapper';
import { defineComponent, ref, watch } from 'vue';
import { useProvidePortal } from '../vc-trigger/context';
import { initDefaultProps } from '../_util/props-util';
const IDialogPropTypes = getDialogPropTypes();
const DialogWrap = defineComponent({
name: 'DialogWrap',
inheritAttrs: false,
props: initDefaultProps(IDialogPropTypes, {
visible: false,
}),
setup(props, { attrs, slots }) {
const animatedVisible = ref(props.visible);
useProvidePortal({}, { inTriggerContext: false });
watch(
() => props.visible,
() => {
if (props.visible) {
animatedVisible.value = true;
}
},
{ flush: 'post' },
);
return () => {
const { visible, getContainer, forceRender, destroyOnClose = false, afterClose } = props;
let dialogProps = {
...props,
...attrs,
ref: '_component',
key: 'dialog',
} as IDialogChildProps;
// 渲染在当前 dom 里;
if (getContainer === false) {
return (
<Dialog
{...dialogProps}
getOpenCount={() => 2} // body
v-slots={slots}
></Dialog>
);
}
// Destroy on close will remove wrapped div
if (!forceRender && destroyOnClose && !animatedVisible.value) {
return null;
}
return (
<Portal
visible={visible}
forceRender={forceRender}
getContainer={getContainer}
v-slots={{
default: (childProps: IDialogChildProps) => {
dialogProps = {
...dialogProps,
...childProps,
afterClose: () => {
afterClose?.();
animatedVisible.value = false;
},
};
return <Dialog {...dialogProps} v-slots={slots}></Dialog>;
},
}}
/>
);
};
},
});
export default DialogWrap;