canrd-outside / order-erp-front · Commits

Commit 7a7dab0c4b3602b7bd3e9381408e4168d7494c52

Authored by 无木
1 parent 59eb828d

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

添加使用is动态组件来在页面内使用多个modal的演示
Inline Side-by-side
Showing 1 changed file with 39 additions and 3 deletions
src/views/demo/comp/modal/index.vue
  View file @7a7dab0
... ... @@ -17,6 +17,16 @@
17 17 <Alert message="内外数据交互" show-icon />
18 18 <a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据 </a-button>
19 19  
  20 + <Alert message="使用动态组件的方式在页面内使用多个弹窗" show-icon />
  21 + <a-space>
  22 + <a-button type="primary" class="my-4" @click="openTargetModal(1)"> 打开弹窗1 </a-button>
  23 + <a-button type="primary" class="my-4" @click="openTargetModal(2)"> 打开弹窗2 </a-button>
  24 + <a-button type="primary" class="my-4" @click="openTargetModal(3)"> 打开弹窗3 </a-button>
  25 + <a-button type="primary" class="my-4" @click="openTargetModal(4)"> 打开弹窗4 </a-button>
  26 + </a-space>
  27 +
  28 + <component :is="currentModal" @register="register" />
  29 +
20 30 <Modal1 @register="register1" :minHeight="100" />
21 31 <Modal2 @register="register2" />
22 32 <Modal3 @register="register3" />
... ... @@ -24,8 +34,8 @@
24 34 </PageWrapper>
25 35 </template>
26 36 <script lang="ts">
27   - import { defineComponent } from 'vue';
28   - import { Alert } from 'ant-design-vue';
  37 + import { defineComponent, nextTick, shallowRef, ComponentOptions } from 'vue';
  38 + import { Alert, Space } from 'ant-design-vue';
29 39 import { useModal } from '/@/components/Modal';
30 40 import Modal1 from './Modal1.vue';
31 41 import Modal2 from './Modal2.vue';
... ... @@ -34,12 +44,14 @@
34 44 import { PageWrapper } from '/@/components/Page';
35 45  
36 46 export default defineComponent({
37   - components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper },
  47 + components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper, ASpace: Space },
38 48 setup() {
  49 + const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
39 50 const [register1, { openModal: openModal1 }] = useModal();
40 51 const [register2, { openModal: openModal2 }] = useModal();
41 52 const [register3, { openModal: openModal3 }] = useModal();
42 53 const [register4, { openModal: openModal4 }] = useModal();
  54 + const [register, { openModal }] = useModal();
43 55 function send() {
44 56 openModal4(true, {
45 57 data: 'content',
... ... @@ -53,6 +65,27 @@
53 65 // setModalProps({ loading: false });
54 66 // }, 2000);
55 67 }
  68 +
  69 + function openTargetModal(index) {
  70 + switch (index) {
  71 + case 1:
  72 + currentModal.value = Modal1;
  73 + break;
  74 + case 2:
  75 + currentModal.value = Modal2;
  76 + break;
  77 + case 3:
  78 + currentModal.value = Modal3;
  79 + break;
  80 + default:
  81 + currentModal.value = Modal4;
  82 + break;
  83 + }
  84 + nextTick(() => {
  85 + openModal(true, { data: 'content', info: 'Info' });
  86 + });
  87 + }
  88 +
56 89 return {
57 90 register1,
58 91 openModal1,
... ... @@ -62,7 +95,10 @@
62 95 openModal3,
63 96 register4,
64 97 openModal4,
  98 + register,
  99 + openTargetModal,
65 100 send,
  101 + currentModal,
66 102 openModalLoading,
67 103 };
68 104 },
... ...