Skip to content

Commit

Permalink
feat(Modal): 增加 onAfterEnter 和 onAfterLeave 事件回调 (#727)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ocean-gao
ocean-gao authored Apr 10, 2024
1 parent 872ad6a commit ddff280
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 32 deletions.
13 changes: 12 additions & 1 deletion components/modal/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,19 @@ const prefixCls = getPrefixCls('modal');
const UPDATE_SHOW_EVENT = 'update:show';
const OK_EVENT = 'ok';
const CANCEL_EVENT = 'cancel';
const AFTER_ENTER_EVENT = 'after-enter';
const AFTER_LEAVE_EVENT = 'after-leave';

const Modal = defineComponent({
name: 'FModal',
props: { ...globalModalProps, ...modalProps },
emits: [UPDATE_SHOW_EVENT, OK_EVENT, CANCEL_EVENT, AFTER_LEAVE_EVENT],
emits: [
UPDATE_SHOW_EVENT,
OK_EVENT,
CANCEL_EVENT,
AFTER_ENTER_EVENT,
AFTER_LEAVE_EVENT,
],
setup(props, ctx) {
useTheme();
const zIndex = ref(PopupManager.nextZIndex());
Expand Down Expand Up @@ -67,6 +74,9 @@ const Modal = defineComponent({
ctx.emit(OK_EVENT, event);
}

function handleTransitionAfterEnter(el: Element) {
ctx.emit(AFTER_ENTER_EVENT, el);
}
function handleTransitionAfterLeave(el: Element) {
ctx.emit(AFTER_LEAVE_EVENT, el);
}
Expand Down Expand Up @@ -217,6 +227,7 @@ const Modal = defineComponent({
</Transition>
<Transition
name={`${prefixCls}-fade`}
onAfterEnter={handleTransitionAfterEnter}
onAfterLeave={handleTransitionAfterLeave}
>
{showDom.value && (
Expand Down
20 changes: 19 additions & 1 deletion docs/.vitepress/components/modal/common.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,20 @@
title="常规"
displayDirective="if"
@ok="show[0] = false"
@afterEnter="handleAfterEnter"
@afterLeave="handleAfterLeave"
>
<div>我是内容...</div>
<div>我是内容...</div>
<div>我是内容...</div>
</FModal>
<FModal v-model:show="show[1]" @ok="show[1] = true">
<FModal
v-model:show="show[1]"
displayDirective="show"
@ok="show[1] = false"
@afterEnter="handleAfterEnter"
@afterLeave="handleAfterLeave"
>
<FAlert
style="margin-bottom: 10px"
type="info"
Expand Down Expand Up @@ -91,8 +99,18 @@ import { reactive } from 'vue';
export default {
setup() {
const show = reactive([]);
const handleAfterEnter = (e) => {
console.log('[modal.common] handleAfterEnter, e:', e);
};
const handleAfterLeave = (e) => {
console.log('[modal.common] handleAfterLeave, e:', e);
};
return {
show,
handleAfterEnter,
handleAfterLeave,
};
},
};
Expand Down
63 changes: 33 additions & 30 deletions docs/.vitepress/components/modal/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,15 @@ showCancel.vue
:::

### 最大弹窗高度
`maxHeight`默认不设置，如果实际弹窗的`height`高于`maxHeight`，以`maxHeight`为准，弹窗内容滚动。

`maxHeight`默认不设置，如果实际弹窗的`height`高于`maxHeight`，以`maxHeight`为准，弹窗内容滚动。

:::demo
maxHeight.vue
:::

### 关闭弹窗

通过配置项可以控制弹窗的关闭方式。

:::demo
Expand All @@ -88,7 +89,7 @@ closable.vue
| closable | 是否显示右上角关闭图标 | Boolean | `true` |
| mask | 是否显示蒙层 | Boolean | `true` |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `true` |
| escClosable | 按下ESC是否允许关闭 | boolean | `true` |
| escClosable | 按下 ESC 是否允许关闭 | boolean | `true` |
| type | 类型，可选值为`info` `success` `error` `warning` `warn` `confirm` | string | `-` |
| title | 标题 | String | `-` |
| footer | 是否显示底部内容 | Boolean | `true` |
Expand All @@ -97,7 +98,7 @@ closable.vue
| showCancel | 是否展示取消按钮 | Boolean | `true` |
| cancelText | 取消按钮文字 | String | 取消 |
| width | 宽度 | String/Number | 520 |
| maxHeight | 最大弹窗高度，如果实际高度大于maxHeight，内容滚动 | String/Number | `-` |
| maxHeight | 最大弹窗高度，如果实际高度大于 maxHeight，内容滚动 | String/Number | `-` |
| top | 距离顶部 | String/Number | 50 |
| bottom | 距离底部，为了防止弹窗底部贴边，可自定义 | String/Number | 50 |
| verticalCenter | 垂直居中 | Boolean | `false` |
Expand All @@ -108,10 +109,12 @@ closable.vue

## Modal Event

| 事件名称 | 说明 | 回调参数 |
| -------- | ------------------------------------ | -------- |
| cancel | 点击遮罩层或右上角叉或取消按钮的回调 | event |
| ok | 点击确定回调 | event |
| 事件名称 | 说明 | 回调参数 |
| ---------- | ------------------------------------ | -------- |
| cancel | 点击遮罩层或右上角叉或取消按钮的回调 | event |
| ok | 点击确定回调 | event |
| afterEnter | Modal 出现后的回调 | event |
| afterLeave | Modal 关闭后的回调 | event |

## Modal Slots

Expand Down Expand Up @@ -139,29 +142,29 @@ closable.vue

参数如下：

| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ------------------------------------------------- | -------------------------- | -------------------------------------------- |
| closable | 是否显示右上角关闭图标 | Boolean | false |
| mask | 是否显示蒙层 | Boolean | true |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | false |
| title | 标题 | string / vNode / ()=>VNode |
| content | 内容 | string / vNode / ()=>VNode | - |
| footer | 页脚 | string / vNode / ()=>VNode | - |
| okText | 确认按钮文字 | String | 确定 |
| okLoading | 确认按钮 Loading 状态 | Boolean | `false` |
| showCancel | 是否展示取消按钮 | Boolean | confim 方法默认`true`，其他方法默认为`false` |
| cancelText | 取消按钮文字 | String | 取消 |
| cancelLoading | 取消按钮 Loading 状态 | Boolean | `false` |
| onOk | 点击确定 | Function | - |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | Function | - |
| width | 宽度 | String/Number | 400 |
| maxHeight | 最大内容高度，如果实际高度大于maxHeight，内容滚动 | String/Number | `-` |
| top | 距离顶部 | String/Number | 50 |
| verticalCenter | 垂直居中 | Boolean | false |
| center | 标题、内容、按钮居中 | Boolean | false |
| fullScreen | 全屏显示 | Boolean | `false` |
| contentClass | 可用于设置内容的类名 | String | - |
| getContainer | 指定 `Modal` 挂载的 HTML 节点 | () => HTMLElement | `() => document.body` |
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | -------------------------------------------------- | -------------------------- | -------------------------------------------- |
| closable | 是否显示右上角关闭图标 | Boolean | false |
| mask | 是否显示蒙层 | Boolean | true |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | false |
| title | 标题 | string / vNode / ()=>VNode |
| content | 内容 | string / vNode / ()=>VNode | - |
| footer | 页脚 | string / vNode / ()=>VNode | - |
| okText | 确认按钮文字 | String | 确定 |
| okLoading | 确认按钮 Loading 状态 | Boolean | `false` |
| showCancel | 是否展示取消按钮 | Boolean | confim 方法默认`true`，其他方法默认为`false` |
| cancelText | 取消按钮文字 | String | 取消 |
| cancelLoading | 取消按钮 Loading 状态 | Boolean | `false` |
| onOk | 点击确定 | Function | - |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | Function | - |
| width | 宽度 | String/Number | 400 |
| maxHeight | 最大内容高度，如果实际高度大于 maxHeight，内容滚动 | String/Number | `-` |
| top | 距离顶部 | String/Number | 50 |
| verticalCenter | 垂直居中 | Boolean | false |
| center | 标题、内容、按钮居中 | Boolean | false |
| fullScreen | 全屏显示 | Boolean | `false` |
| contentClass | 可用于设置内容的类名 | String | - |
| getContainer | 指定 `Modal` 挂载的 HTML 节点 | () => HTMLElement | `() => document.body` |

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

Expand Down

0 comments on commit ddff280

Please sign in to comment.