mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-01-23 01:30:26 +08:00
perf: add nested modal demo (#5353)
This commit is contained in:
parent
1a04a05b79
commit
467689525f
@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { Page, useVbenModal } from '@vben/common-ui';
|
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 DocButton from '../doc-button.vue';
|
||||||
import AutoHeightDemo from './auto-height-demo.vue';
|
import AutoHeightDemo from './auto-height-demo.vue';
|
||||||
@ -10,6 +10,7 @@ import DragDemo from './drag-demo.vue';
|
|||||||
import DynamicDemo from './dynamic-demo.vue';
|
import DynamicDemo from './dynamic-demo.vue';
|
||||||
import FormModalDemo from './form-modal-demo.vue';
|
import FormModalDemo from './form-modal-demo.vue';
|
||||||
import InContentModalDemo from './in-content-demo.vue';
|
import InContentModalDemo from './in-content-demo.vue';
|
||||||
|
import NestedDemo from './nested-demo.vue';
|
||||||
import SharedDataDemo from './shared-data-demo.vue';
|
import SharedDataDemo from './shared-data-demo.vue';
|
||||||
|
|
||||||
const [BaseModal, baseModalApi] = useVbenModal({
|
const [BaseModal, baseModalApi] = useVbenModal({
|
||||||
@ -42,6 +43,10 @@ const [FormModal, formModalApi] = useVbenModal({
|
|||||||
connectedComponent: FormModalDemo,
|
connectedComponent: FormModalDemo,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const [NestedModal, nestedModalApi] = useVbenModal({
|
||||||
|
connectedComponent: NestedDemo,
|
||||||
|
});
|
||||||
|
|
||||||
function openBaseModal() {
|
function openBaseModal() {
|
||||||
baseModalApi.open();
|
baseModalApi.open();
|
||||||
}
|
}
|
||||||
@ -71,6 +76,10 @@ function openSharedModal() {
|
|||||||
.open();
|
.open();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openNestedModal() {
|
||||||
|
nestedModalApi.open();
|
||||||
|
}
|
||||||
|
|
||||||
function handleUpdateTitle() {
|
function handleUpdateTitle() {
|
||||||
dynamicModalApi.setState({ title: '外部动态标题' }).open();
|
dynamicModalApi.setState({ title: '外部动态标题' }).open();
|
||||||
}
|
}
|
||||||
@ -101,44 +110,72 @@ function openFormModal() {
|
|||||||
<DynamicModal />
|
<DynamicModal />
|
||||||
<SharedDataModal />
|
<SharedDataModal />
|
||||||
<FormModal />
|
<FormModal />
|
||||||
<Card class="mb-4" title="基本使用">
|
<NestedModal />
|
||||||
<p class="mb-3">一个基础的弹窗示例</p>
|
<Flex wrap="wrap" class="w-full" gap="10">
|
||||||
<Button type="primary" @click="openBaseModal">打开弹窗</Button>
|
<Card class="w-[300px]" title="基本使用">
|
||||||
</Card>
|
<p>一个基础的弹窗示例</p>
|
||||||
|
<template #actions>
|
||||||
|
<Button type="primary" @click="openBaseModal">打开弹窗</Button>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card class="mb-4" title="指定容器">
|
<Card class="w-[300px]" title="指定容器">
|
||||||
<p class="mb-3">在内容区域打开弹窗的示例</p>
|
<p>在内容区域打开弹窗的示例</p>
|
||||||
<Button type="primary" @click="openInContentModal">打开弹窗</Button>
|
<template #actions>
|
||||||
</Card>
|
<Button type="primary" @click="openInContentModal">打开弹窗</Button>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card class="mb-4" title="内容高度自适应">
|
<Card class="w-[300px]" title="内容高度自适应">
|
||||||
<p class="mb-3">可根据内容并自动调整高度</p>
|
<p>可根据内容并自动调整高度</p>
|
||||||
<Button type="primary" @click="openAutoHeightModal">打开弹窗</Button>
|
<template #actions>
|
||||||
</Card>
|
<Button type="primary" @click="openAutoHeightModal">
|
||||||
|
打开弹窗
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card class="mb-4" title="可拖拽示例">
|
<Card class="w-[300px]" title="可拖拽示例">
|
||||||
<p class="mb-3">配置 draggable 可开启拖拽功能</p>
|
<p>配置 draggable 可开启拖拽功能</p>
|
||||||
<Button type="primary" @click="openDragModal">打开弹窗</Button>
|
<template #actions>
|
||||||
</Card>
|
<Button type="primary" @click="openDragModal"> 打开弹窗 </Button>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card class="mb-4" title="动态配置示例">
|
<Card class="w-[300px]" title="动态配置示例">
|
||||||
<p class="mb-3">通过 setState 动态调整弹窗数据</p>
|
<p>通过 setState 动态调整弹窗数据</p>
|
||||||
<Button type="primary" @click="openDynamicModal">打开弹窗</Button>
|
<template #extra>
|
||||||
<Button class="ml-2" type="primary" @click="handleUpdateTitle">
|
<Button type="link" @click="openDynamicModal">打开弹窗</Button>
|
||||||
从外部修改标题并打开
|
</template>
|
||||||
</Button>
|
<template #actions>
|
||||||
</Card>
|
<Button type="primary" @click="handleUpdateTitle">
|
||||||
|
外部修改标题并打开
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card class="mb-4" title="内外数据共享示例">
|
<Card class="w-[300px]" title="内外数据共享示例">
|
||||||
<p class="mb-3">通过共享 sharedData 来进行数据交互</p>
|
<p>通过共享 sharedData 来进行数据交互</p>
|
||||||
<Button type="primary" @click="openSharedModal">
|
<template #actions>
|
||||||
打开弹窗并传递数据
|
<Button type="primary" @click="openSharedModal">
|
||||||
</Button>
|
打开弹窗并传递数据
|
||||||
</Card>
|
</Button>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card class="mb-4" title="表单弹窗示例">
|
<Card class="w-[300px]" title="表单弹窗示例">
|
||||||
<p class="mb-3">弹窗与表单结合</p>
|
<p>弹窗与表单结合</p>
|
||||||
<Button type="primary" @click="openFormModal"> 打开弹窗 </Button>
|
<template #actions>
|
||||||
</Card>
|
<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>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
24
playground/src/views/examples/modal/nested-demo.vue
Normal file
24
playground/src/views/examples/modal/nested-demo.vue
Normal file
@ -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…
Reference in New Issue
Block a user