Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

perf: add nested modal demo #5353

Merged
merged 1 commit into from
Jan 11, 2025
Merged

perf: add nested modal demo #5353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 77 additions & 40 deletions playground/src/views/examples/modal/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { Page, useVbenModal } from '@vben/common-ui';

import { Button, Card } from 'ant-design-vue';
import { Button, Card, Flex } from 'ant-design-vue';

import DocButton from '../doc-button.vue';
import AutoHeightDemo from './auto-height-demo.vue';
Expand All @@ -10,6 +10,7 @@ import DragDemo from './drag-demo.vue';
import DynamicDemo from './dynamic-demo.vue';
import FormModalDemo from './form-modal-demo.vue';
import InContentModalDemo from './in-content-demo.vue';
import NestedDemo from './nested-demo.vue';
import SharedDataDemo from './shared-data-demo.vue';

const [BaseModal, baseModalApi] = useVbenModal({
Expand Down Expand Up @@ -42,6 +43,10 @@ const [FormModal, formModalApi] = useVbenModal({
connectedComponent: FormModalDemo,
});

const [NestedModal, nestedModalApi] = useVbenModal({
connectedComponent: NestedDemo,
});

function openBaseModal() {
baseModalApi.open();
}
Expand Down Expand Up @@ -71,6 +76,10 @@ function openSharedModal() {
.open();
}

function openNestedModal() {
nestedModalApi.open();
}

function handleUpdateTitle() {
dynamicModalApi.setState({ title: '外部动态标题' }).open();
}
Expand Down Expand Up @@ -101,44 +110,72 @@ function openFormModal() {
<DynamicModal />
<SharedDataModal />
<FormModal />
<Card class="mb-4" title="基本使用">
<p class="mb-3">一个基础的弹窗示例</p>
<Button type="primary" @click="openBaseModal">打开弹窗</Button>
</Card>

<Card class="mb-4" title="指定容器">
<p class="mb-3">在内容区域打开弹窗的示例</p>
<Button type="primary" @click="openInContentModal">打开弹窗</Button>
</Card>

<Card class="mb-4" title="内容高度自适应">
<p class="mb-3">可根据内容并自动调整高度</p>
<Button type="primary" @click="openAutoHeightModal">打开弹窗</Button>
</Card>

<Card class="mb-4" title="可拖拽示例">
<p class="mb-3">配置 draggable 可开启拖拽功能</p>
<Button type="primary" @click="openDragModal">打开弹窗</Button>
</Card>

<Card class="mb-4" title="动态配置示例">
<p class="mb-3">通过 setState 动态调整弹窗数据</p>
<Button type="primary" @click="openDynamicModal">打开弹窗</Button>
<Button class="ml-2" type="primary" @click="handleUpdateTitle">
从外部修改标题并打开
</Button>
</Card>

<Card class="mb-4" title="内外数据共享示例">
<p class="mb-3">通过共享 sharedData 来进行数据交互</p>
<Button type="primary" @click="openSharedModal">
打开弹窗并传递数据
</Button>
</Card>

<Card class="mb-4" title="表单弹窗示例">
<p class="mb-3">弹窗与表单结合</p>
<Button type="primary" @click="openFormModal"> 打开弹窗 </Button>
</Card>
<NestedModal />
<Flex wrap="wrap" class="w-full" gap="10">
<Card class="w-[300px]" title="基本使用">
<p>一个基础的弹窗示例</p>
<template #actions>
<Button type="primary" @click="openBaseModal">打开弹窗</Button>
</template>
</Card>

<Card class="w-[300px]" title="指定容器">
<p>在内容区域打开弹窗的示例</p>
<template #actions>
<Button type="primary" @click="openInContentModal">打开弹窗</Button>
</template>
</Card>

<Card class="w-[300px]" title="内容高度自适应">
<p>可根据内容并自动调整高度</p>
<template #actions>
<Button type="primary" @click="openAutoHeightModal">
打开弹窗
</Button>
</template>
</Card>

<Card class="w-[300px]" title="可拖拽示例">
<p>配置 draggable 可开启拖拽功能</p>
<template #actions>
<Button type="primary" @click="openDragModal"> 打开弹窗 </Button>
</template>
</Card>

<Card class="w-[300px]" title="动态配置示例">
<p>通过 setState 动态调整弹窗数据</p>
<template #extra>
<Button type="link" @click="openDynamicModal">打开弹窗</Button>
</template>
<template #actions>
<Button type="primary" @click="handleUpdateTitle">
外部修改标题并打开
</Button>
</template>
</Card>

<Card class="w-[300px]" title="内外数据共享示例">
<p>通过共享 sharedData 来进行数据交互</p>
<template #actions>
<Button type="primary" @click="openSharedModal">
打开弹窗并传递数据
</Button>
</template>
</Card>

<Card class="w-[300px]" title="表单弹窗示例">
<p>弹窗与表单结合</p>
<template #actions>
<Button type="primary" @click="openFormModal"> 打开表单弹窗 </Button>
</template>
</Card>

<Card class="w-[300px]" title="嵌套弹窗示例">
<p>在已经打开的弹窗中再次打开弹窗</p>
<template #actions>
<Button type="primary" @click="openNestedModal">打开嵌套弹窗</Button>
</template>
</Card>
</Flex>
</Page>
</template>
24 changes: 24 additions & 0 deletions playground/src/views/examples/modal/nested-demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';

import { Button } from 'ant-design-vue';

import DragDemo from './drag-demo.vue';

const [Modal] = useVbenModal({
destroyOnClose: true,
});
const [BaseModal, baseModalApi] = useVbenModal({
connectedComponent: DragDemo,
});

function openNestedModal() {
baseModalApi.open();
}
</script>
<template>
<Modal title="嵌套弹窗示例">
<Button @click="openNestedModal" type="primary">打开子弹窗</Button>
<BaseModal />
</Modal>
</template>
Loading