mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-25 08:06:30 +08:00
perf: improve destroyOnClose
for VbenModal
(#5935)
* perf: 优化Vben Modal destroyOnClose,解决destroyOnClose=false,Modal依旧会被销毁的问题 影响范围(重要):destroyOnClose默认为true,这会导致所有的modal都会默认渲染到body radix-vue Dialog组件默认会销毁挂载的组件,所以即使destroyOnClose=false,Modal依旧会被销毁的问题 对于一些大表单重复渲染导致卡顿,ApiComponent也会频繁的加载数据 * fix: modal closing animation --------- Co-authored-by: Netfan <netfan@foxmail.com>
This commit is contained in:
@@ -16,15 +16,18 @@ const [Modal, modalApi] = useVbenModal({
|
||||
},
|
||||
onOpenChange(isOpen) {
|
||||
if (isOpen) {
|
||||
handleUpdate(10);
|
||||
handleUpdate();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function handleUpdate(len: number) {
|
||||
function handleUpdate(len?: number) {
|
||||
modalApi.setState({ confirmDisabled: true, loading: true });
|
||||
setTimeout(() => {
|
||||
list.value = Array.from({ length: len }, (_v, k) => k + 1);
|
||||
list.value = Array.from(
|
||||
{ length: len ?? Math.floor(Math.random() * 10) + 1 },
|
||||
(_v, k) => k + 1,
|
||||
);
|
||||
modalApi.setState({ confirmDisabled: false, loading: false });
|
||||
}, 2000);
|
||||
}
|
||||
@@ -40,7 +43,7 @@ function handleUpdate(len: number) {
|
||||
{{ item }}
|
||||
</div>
|
||||
<template #prepend-footer>
|
||||
<Button type="link" @click="handleUpdate(6)">点击更新数据</Button>
|
||||
<Button type="link" @click="handleUpdate()">点击更新数据</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
@@ -24,7 +24,7 @@ const value = ref();
|
||||
title="基础弹窗示例"
|
||||
title-tooltip="标题提示内容"
|
||||
>
|
||||
此弹窗指定在内容区域打开
|
||||
<Input v-model="value" placeholder="KeepAlive测试" />
|
||||
此弹窗指定在内容区域打开,并且在关闭之后弹窗内容不会被销毁
|
||||
<Input v-model:value="value" placeholder="KeepAlive测试" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
@@ -198,7 +198,7 @@ async function openPrompt() {
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="w-[300px]" title="指定容器">
|
||||
<Card class="w-[300px]" title="指定容器+关闭后不销毁">
|
||||
<p>在内容区域打开弹窗的示例</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openInContentModal">打开弹窗</Button>
|
||||
|
Reference in New Issue
Block a user