<template>
|
<PageWrapper title="modal组件使用示例">
|
<Alert
|
message="使用 useModal 进行弹窗操作，默认可以拖动，可以通过 draggable
|
参数进行控制是否可以拖动/全屏，并演示了在Modal内动态加载内容并自动调整高度"
|
show-icon
|
/>
|
<a-button type="primary" class="my-4" @click="openModalLoading">
|
打开弹窗,加载动态数据并自动调整高度(默认可以拖动/全屏)
|
</a-button>
|
|
<Alert message="内外同时同时显示隐藏" show-icon />
|
<a-button type="primary" class="my-4" @click="openModal2"> 打开弹窗 </a-button>
|
|
<Alert message="自适应高度" show-icon />
|
<Space>
|
<a-button type="primary" class="my-4" @click="openModal3"> 打开弹窗 </a-button>
|
<a-button type="primary" class="my-4" @click="openModal5"> 打开弹窗（BasicTable） </a-button>
|
</Space>
|
|
<Alert message="内外数据交互" show-icon />
|
<a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据 </a-button>
|
|
<Alert message="使用动态组件的方式在页面内使用多个弹窗" show-icon />
|
<Space>
|
<a-button type="primary" class="my-4" @click="openTargetModal(1)"> 打开弹窗1 </a-button>
|
<a-button type="primary" class="my-4" @click="openTargetModal(2)"> 打开弹窗2 </a-button>
|
<a-button type="primary" class="my-4" @click="openTargetModal(3)"> 打开弹窗3 </a-button>
|
<a-button type="primary" class="my-4" @click="openTargetModal(4)"> 打开弹窗4 </a-button>
|
</Space>
|
|
<Alert
|
message="使用函数方式创建Prompt，适合较为简单的表单内容，如果需要弹出较为复杂的内容，请使用 Modal."
|
show-icon
|
/>
|
<a-button type="primary" class="my-4" @click="handleCreatePrompt"> Prompt </a-button>
|
|
<component
|
v-if="currentModal"
|
:is="currentModal"
|
v-model:open="modalOpen"
|
:userData="userData"
|
/>
|
|
<Modal1 @register="register1" :minHeight="100" />
|
<Modal2 @register="register2" />
|
<Modal3 @register="register3" />
|
<Modal4 @register="register4" />
|
<Modal5 @register="register5" />
|
</PageWrapper>
|
</template>
|
<script lang="ts" setup>
|
import { shallowRef, ComponentOptions, ref, nextTick } from 'vue';
|
import { Alert, Space, message } from 'ant-design-vue';
|
import { useModal } from '@/components/Modal';
|
import Modal1 from './Modal1.vue';
|
import Modal2 from './Modal2.vue';
|
import Modal3 from './Modal3.vue';
|
import Modal4 from './Modal4.vue';
|
import Modal5 from './Modal5.vue';
|
import { PageWrapper } from '@/components/Page';
|
import { type Nullable } from '@vben/types';
|
import { createPrompt } from '@/components/Prompt';
|
|
const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
|
const [register1, { openModal: openModal1 }] = useModal();
|
const [register2, { openModal: openModal2 }] = useModal();
|
const [register3, { openModal: openModal3 }] = useModal();
|
const [register4, { openModal: openModal4 }] = useModal();
|
const [register5, { openModal: openModal5 }] = useModal();
|
const modalOpen = ref<Boolean>(false);
|
const userData = ref<any>(null);
|
|
function send() {
|
openModal4(true, {
|
data: 'content',
|
info: 'Info',
|
});
|
}
|
function openModalLoading() {
|
openModal1(true);
|
// setModalProps({ loading: true });
|
// setTimeout(() => {
|
// setModalProps({ loading: false });
|
// }, 2000);
|
}
|
|
function openTargetModal(index: number) {
|
switch (index) {
|
case 1:
|
currentModal.value = Modal1 as ComponentOptions;
|
break;
|
case 2:
|
currentModal.value = Modal2 as ComponentOptions;
|
break;
|
case 3:
|
currentModal.value = Modal3 as ComponentOptions;
|
break;
|
default:
|
currentModal.value = Modal4 as ComponentOptions;
|
break;
|
}
|
nextTick(() => {
|
// `useModal` not working with dynamic component
|
// passing data through `userData` prop
|
userData.value = { data: Math.random(), info: 'Info222' };
|
// open the target modal
|
modalOpen.value = true;
|
});
|
}
|
|
function handleCreatePrompt() {
|
createPrompt({
|
title: '请输入邮箱',
|
required: true,
|
label: '邮箱',
|
defaultValue: '默认邮箱',
|
onOK: async (email: string) => {
|
message.success('填写的邮箱地址为' + email);
|
},
|
inputType: 'Input',
|
});
|
}
|
</script>
|
