jeecg-vue3如何在一个页面中打开多个弹窗

引言

jeecg-vue3如何在一个页面设置多个按钮操作。 并且点击后打开不同的弹窗。

代码demo

• template

<a-button type="primary" class="my-4" @click="openTargetModal(1)"> 打开弹窗1</a-button>

<component :is="currentModal" v-model:visible="modalVisible" :userData="userData"/>
<Modal1 @register="register1" :minHeight="100"/>
<Modal2 @register="register2"/>
<Modal3 @register="register3"/>
<Modal4 @register="register4"/>

• script

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';

const modalVisible = ref<Boolean>(false);

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 openTargetModal =()=>{
    openModal(true, {
       isUpdate: true,
       showFooter: true,
     });
}

 function openTargetModal(index) {
    switch (index) {
        case 1:
            currentModal.value = Modal1;
            break;
        case 2:
            currentModal.value = Modal2;
            break;
        case 3:
            currentModal.value = Modal3;
            break;
        default:
            currentModal.value = Modal4;
            break;
    }
    nextTick(() => {
        // `useModal` not working with dynamic component
        // passing data through `userData` prop
        userData.value = {data: Math.random(), info: 'Info222'};
        // open the target modal
        modalVisible.value = true;
    });
}