zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(demo): multi-modal in one page usage 

添加使用is动态组件来在页面内使用多个modal的演示
This commit is contained in:
无木 2021-07-19 18:40:02 +08:00
parent 59eb828d4d
commit 7a7dab0c4b
1 changed files with 39 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/demo/comp/modal/index.vue
View File

@ -17,6 +17,16 @@
<Alert message="内外数据交互" show-icon /> <Alert message="内外数据交互" show-icon />
<a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据 </a-button> <a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据 </a-button>
<Alert message="使用动态组件的方式在页面内使用多个弹窗" show-icon />
<a-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>
</a-space>
<component :is="currentModal" @register="register" />
<Modal1 @register="register1" :minHeight="100" /> <Modal1 @register="register1" :minHeight="100" />
<Modal2 @register="register2" /> <Modal2 @register="register2" />
<Modal3 @register="register3" /> <Modal3 @register="register3" />
@ -24,8 +34,8 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, nextTick, shallowRef, ComponentOptions } from 'vue';
import { Alert } from 'ant-design-vue'; import { Alert, Space } from 'ant-design-vue';
import { useModal } from '/@/components/Modal'; import { useModal } from '/@/components/Modal';
import Modal1 from './Modal1.vue'; import Modal1 from './Modal1.vue';
import Modal2 from './Modal2.vue'; import Modal2 from './Modal2.vue';
@ -34,12 +44,14 @@
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
export default defineComponent({ export default defineComponent({
components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper }, components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper, ASpace: Space },
setup() { setup() {
const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
const [register1, { openModal: openModal1 }] = useModal(); const [register1, { openModal: openModal1 }] = useModal();
const [register2, { openModal: openModal2 }] = useModal(); const [register2, { openModal: openModal2 }] = useModal();
const [register3, { openModal: openModal3 }] = useModal(); const [register3, { openModal: openModal3 }] = useModal();
const [register4, { openModal: openModal4 }] = useModal(); const [register4, { openModal: openModal4 }] = useModal();
const [register, { openModal }] = useModal();
function send() { function send() {
openModal4(true, { openModal4(true, {
data: 'content', data: 'content',
@ -53,6 +65,27 @@
// setModalProps({ loading: false }); // setModalProps({ loading: false });
// }, 2000); // }, 2000);
} }
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(() => {
openModal(true, { data: 'content', info: 'Info' });
});
}
return { return {
register1, register1,
openModal1, openModal1,
@ -62,7 +95,10 @@
openModal3, openModal3,
register4, register4,
openModal4, openModal4,
register,
openTargetModal,
send, send,
currentModal,
openModalLoading, openModalLoading,
}; };
}, },