Skip to content

Commit

Permalink
Merge pull request #925 from WeBankFinTech/feat-modal-animiation
Browse files Browse the repository at this point in the history 
feat(Modal): 增加 useAnimation 是否使用动画的配置项
  • Loading branch information
@zym19960704
zym19960704 authored Jan 14, 2025
2 parents 53a6743 + 496c9fa commit 7347c09
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 51 deletions.
123 changes: 72 additions & 51 deletions components/modal/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,63 +227,84 @@ const Modal = defineComponent({
return [`${prefixCls}-wrapper`, props.contentClass].filter(Boolean);
});

const renderMask = () => {
return (
<div
class={`${prefixCls}-mask`}
style={{ zIndex: zIndex.value }}
v-show={visible.value}
></div>
);
};

const renderContent = () => {
return (
<div
v-show={visible.value}
class={{
[`${prefixCls}-container`]: true,
[`${prefixCls}-center`]: props.center,
[`${prefixCls}-vertical-center`]:
props.verticalCenter,
[`${prefixCls}-fullscreen`]:
props.fullScreen,
[`${prefixCls}-global`]: props.forGlobal,
[`${prefixCls}-no-header`]:
!hasHeader.value,
[`${prefixCls}-no-footer`]: !props.footer,
}}
style={{ zIndex: zIndex.value }}
onClick={(event) => handleClickMask(event)}
>
<div
class={wrapperClass.value}
style={styles.value}
onClick={(event) => event.stopPropagation()}
onMousedown={() => {
mouseDownInsideChild.value = true;
}}
onMouseup={() => {
mouseDownInsideChild.value = false;
}}
ref={modalRef}
>
{getHeader()}
{getBody()}
{getFooter()}
</div>
</div>
);
};

return () => (
<Teleport
disabled={!getContainer.value?.()}
to={getContainer.value?.()}
>
<div class={rootClass.value}>
<Transition name={`${prefixCls}-mask-fade`}>
{props.mask && showDom.value && (
<div
class={`${prefixCls}-mask`}
style={{ zIndex: zIndex.value }}
v-show={visible.value}
></div>
)}
</Transition>
<Transition
name={`${prefixCls}-fade`}
onAfterEnter={handleTransitionAfterEnter}
onAfterLeave={handleTransitionAfterLeave}
>
{showDom.value && (
<div
v-show={visible.value}
class={{
[`${prefixCls}-container`]: true,
[`${prefixCls}-center`]: props.center,
[`${prefixCls}-vertical-center`]:
props.verticalCenter,
[`${prefixCls}-fullscreen`]:
props.fullScreen,
[`${prefixCls}-global`]: props.forGlobal,
[`${prefixCls}-no-header`]:
!hasHeader.value,
[`${prefixCls}-no-footer`]: !props.footer,
}}
style={{ zIndex: zIndex.value }}
onClick={(event) => handleClickMask(event)}
>
<div
class={wrapperClass.value}
style={styles.value}
onClick={(event) => event.stopPropagation()}
onMousedown={() => {
mouseDownInsideChild.value = true;
}}
onMouseup={() => {
mouseDownInsideChild.value = false;
}}
ref={modalRef}
>
{getHeader()}
{getBody()}
{getFooter()}
</div>
</div>
)}
</Transition>
{
props.useAnimation
? (
<>
<Transition name={`${prefixCls}-mask-fade`}>
{props.mask && showDom.value && renderMask()}
</Transition>
<Transition
name={`${prefixCls}-fade`}
onAfterEnter={handleTransitionAfterEnter}
onAfterLeave={handleTransitionAfterLeave}
>
{showDom.value && renderContent()}
</Transition>
</>
)
: (
<>
{props.mask && showDom.value && renderMask()}
{showDom.value && renderContent()}
</>
)
}
</div>
</Teleport>
);
Expand Down
3 changes: 3 additions & 0 deletions components/modal/modalApi.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ export interface ModalConfig {
center?: boolean;
fullScreen?: boolean;
contentClass?: string;
wrapperClass?: string;
useAnimation?: boolean;
getContainer?: () => HTMLElement;
}

Expand All @@ -40,6 +42,7 @@ const defaultConfig: ModalConfig = {
getContainer: () => document.body,
width: 400,
closable: false,
useAnimation: true,
};
let mergeConfig: ModalConfig = defaultConfig;

Expand Down
5 changes: 5 additions & 0 deletions components/modal/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import type {
} from 'vue';
import { iconComponentMap } from '../_util/noticeManager';
import type { ExtractPublicPropTypes } from '../_util/interface';
import { useAnimate } from '../_util/use/useAnimate';

export const modalIconMap = {
...iconComponentMap,
Expand Down Expand Up @@ -89,6 +90,10 @@ export const modalProps = {
contentClass: String,
// 根类名
wrapperClass: String,
useAnimation: {
type: Boolean,
default: true,
},
} as const satisfies ComponentObjectPropsOptions;

export type ModalProps = ExtractPublicPropTypes<typeof modalProps>;
Expand Down
3 changes: 3 additions & 0 deletions docs/.vitepress/components/modal/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ closable.vue
| fullScreen | 全屏显示 | Boolean | `false` |
| contentClass | 可用于设置内容的类名 | String | `-` |
| wrapperClass | 可用于设置组件根类名 | String | `-` |
| useAnimation | 是否使用动画 | Boolean | `true` |
| getContainer | 指定 `Modal` 挂载的 HTML 节点 | () => HTMLElement | `() => document.body` |

## Modal Event
Expand Down Expand Up @@ -165,6 +166,8 @@ closable.vue
| center | 标题、内容、按钮居中 | Boolean | false |
| fullScreen | 全屏显示 | Boolean | `false` |
| contentClass | 可用于设置内容的类名 | String | - |
| wrapperClass | 可用于设置组件根类名 | String | `-` |
| useAnimation | 是否使用动画 | Boolean | `true` |
| getContainer | 指定 `Modal` 挂载的 HTML 节点 | () => HTMLElement | `() => document.body` |

以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。
Expand Down

0 comments on commit 7347c09

Please sign in to comment.