fix(demo): multi-modal used with dynamic component

修复以动态组件的方式使用多个modal的演示

fix(demo): multi-modal used with dynamic component
修复以动态组件的方式使用多个modal的演示
无木
1 parent 956ed2e3
Showing 2 changed files with 39 additions and 14 deletions
src/views/demo/comp/modal/Modal4.vue
src/views/demo/comp/modal/index.vue
 <template>
-  <BasicModal v-bind="$attrs" @register="register" title="Modal Title">
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="Modal Title"
+    @visible-change="handleVisibleChange"
+  >
     <BasicForm @register="registerForm" :model="model" />
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, nextTick } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
   const schemas: FormSchema[] = [
@@ -13,7 +18,7 @@
       component: 'Input',
       label: '字段1',
       colProps: {
-        span: 12,
+        span: 24,
       },
       defaultValue: '111',
     },
@@ -22,13 +27,16 @@
       component: 'Input',
       label: '字段2',
       colProps: {
-        span: 12,
+        span: 24,
       },
     },
   ];
   export default defineComponent({
     components: { BasicModal, BasicForm },
-    setup() {
+    props: {
+      userData: { type: Object },
+    },
+    setup(props) {
       const modelRef = ref({});
       const [
         registerForm,
@@ -46,20 +54,30 @@
       });
       const [register] = useModalInner((data) => {
-        // 方式1
+        data && onDataReceive(data);
+      });
+
+      function onDataReceive(data) {
+        console.log('Data Received', data);
+        // 方式1;
         // setFieldsValue({
         //   field2: data.data,
         //   field1: data.info,
         // });
-        // 方式2
+        // // 方式2
         modelRef.value = { field2: data.data, field1: data.info };
         // setProps({
         //   model:{ field2: data.data, field1: data.info }
         // })
-      });
-      return { register, schemas, registerForm, model: modelRef };
+      }
+
+      function handleVisibleChange(v) {
+        v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+
+      return { register, schemas, registerForm, model: modelRef, handleVisibleChange };
     },
   });
 </script>
@@ -25,7 +25,7 @@
       <a-button type="primary" class="my-4" @click="openTargetModal(4)"> 打开弹窗4 </a-button>
     </a-space>
-    <component :is="currentModal" @register="register" />
+    <component :is="currentModal" v-model:visible="modalVisible" :userData="userData" />
     <Modal1 @register="register1" :minHeight="100" />
     <Modal2 @register="register2" />
@@ -34,7 +34,7 @@
   </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent, nextTick, shallowRef, ComponentOptions } from 'vue';
+  import { defineComponent, shallowRef, ComponentOptions, ref, nextTick } from 'vue';
   import { Alert, Space } from 'ant-design-vue';
   import { useModal } from '/@/components/Modal';
   import Modal1 from './Modal1.vue';
@@ -51,7 +51,9 @@
       const [register2, { openModal: openModal2 }] = useModal();
       const [register3, { openModal: openModal3 }] = useModal();
       const [register4, { openModal: openModal4 }] = useModal();
-      const [register, { openModal }] = useModal();
+      const modalVisible = ref<Boolean>(false);
+      const userData = ref<any>(null);
+
       function send() {
         openModal4(true, {
           data: 'content',
@@ -82,7 +84,11 @@
             break;
         }
         nextTick(() => {
-          openModal(true, { data: 'content', info: 'Info' });
+          // `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;
         });
       }
@@ -95,7 +101,8 @@
         openModal3,
         register4,
         openModal4,
-        register,
+        modalVisible,
+        userData,
         openTargetModal,
         send,
         currentModal,