canrd-outside / order-erp-front · Commits

Commit e1c47233edf7675aede6d5f023726945a510ddf7

Authored by 无木
1 parent 956ed2e3

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

修复以动态组件的方式使用多个modal的演示
Inline Side-by-side
Showing 2 changed files with 39 additions and 14 deletions
src/views/demo/comp/modal/Modal4.vue
  View file @e1c4723
1 1 <template>
2   - <BasicModal v-bind="$attrs" @register="register" title="Modal Title">
  2 + <BasicModal
  3 + v-bind="$attrs"
  4 + @register="register"
  5 + title="Modal Title"
  6 + @visible-change="handleVisibleChange"
  7 + >
3 8 <BasicForm @register="registerForm" :model="model" />
4 9 </BasicModal>
5 10 </template>
6 11 <script lang="ts">
7   - import { defineComponent, ref } from 'vue';
  12 + import { defineComponent, ref, nextTick } from 'vue';
8 13 import { BasicModal, useModalInner } from '/@/components/Modal';
9 14 import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
10 15 const schemas: FormSchema[] = [
... ... @@ -13,7 +18,7 @@
13 18 component: 'Input',
14 19 label: '字段1',
15 20 colProps: {
16   - span: 12,
  21 + span: 24,
17 22 },
18 23 defaultValue: '111',
19 24 },
... ... @@ -22,13 +27,16 @@
22 27 component: 'Input',
23 28 label: '字段2',
24 29 colProps: {
25   - span: 12,
  30 + span: 24,
26 31 },
27 32 },
28 33 ];
29 34 export default defineComponent({
30 35 components: { BasicModal, BasicForm },
31   - setup() {
  36 + props: {
  37 + userData: { type: Object },
  38 + },
  39 + setup(props) {
32 40 const modelRef = ref({});
33 41 const [
34 42 registerForm,
... ... @@ -46,20 +54,30 @@
46 54 });
47 55  
48 56 const [register] = useModalInner((data) => {
49   - // 方式1
  57 + data && onDataReceive(data);
  58 + });
  59 +
  60 + function onDataReceive(data) {
  61 + console.log('Data Received', data);
  62 + // 方式1;
50 63 // setFieldsValue({
51 64 // field2: data.data,
52 65 // field1: data.info,
53 66 // });
54 67  
55   - // 方式2
  68 + // // 方式2
56 69 modelRef.value = { field2: data.data, field1: data.info };
57 70  
58 71 // setProps({
59 72 // model:{ field2: data.data, field1: data.info }
60 73 // })
61   - });
62   - return { register, schemas, registerForm, model: modelRef };
  74 + }
  75 +
  76 + function handleVisibleChange(v) {
  77 + v && props.userData && nextTick(() => onDataReceive(props.userData));
  78 + }
  79 +
  80 + return { register, schemas, registerForm, model: modelRef, handleVisibleChange };
63 81 },
64 82 });
65 83 </script>
... ...
src/views/demo/comp/modal/index.vue
  View file @e1c4723
... ... @@ -25,7 +25,7 @@
25 25 <a-button type="primary" class="my-4" @click="openTargetModal(4)"> 打开弹窗4 </a-button>
26 26 </a-space>
27 27  
28   - <component :is="currentModal" @register="register" />
  28 + <component :is="currentModal" v-model:visible="modalVisible" :userData="userData" />
29 29  
30 30 <Modal1 @register="register1" :minHeight="100" />
31 31 <Modal2 @register="register2" />
... ... @@ -34,7 +34,7 @@
34 34 </PageWrapper>
35 35 </template>
36 36 <script lang="ts">
37   - import { defineComponent, nextTick, shallowRef, ComponentOptions } from 'vue';
  37 + import { defineComponent, shallowRef, ComponentOptions, ref, nextTick } from 'vue';
38 38 import { Alert, Space } from 'ant-design-vue';
39 39 import { useModal } from '/@/components/Modal';
40 40 import Modal1 from './Modal1.vue';
... ... @@ -51,7 +51,9 @@
51 51 const [register2, { openModal: openModal2 }] = useModal();
52 52 const [register3, { openModal: openModal3 }] = useModal();
53 53 const [register4, { openModal: openModal4 }] = useModal();
54   - const [register, { openModal }] = useModal();
  54 + const modalVisible = ref<Boolean>(false);
  55 + const userData = ref<any>(null);
  56 +
55 57 function send() {
56 58 openModal4(true, {
57 59 data: 'content',
... ... @@ -82,7 +84,11 @@
82 84 break;
83 85 }
84 86 nextTick(() => {
85   - openModal(true, { data: 'content', info: 'Info' });
  87 + // `useModal` not working with dynamic component
  88 + // passing data through `userData` prop
  89 + userData.value = { data: Math.random(), info: 'Info222' };
  90 + // open the target modal
  91 + modalVisible.value = true;
86 92 });
87 93 }
88 94  
... ... @@ -95,7 +101,8 @@
95 101 openModal3,
96 102 register4,
97 103 openModal4,
98   - register,
  104 + modalVisible,
  105 + userData,
99 106 openTargetModal,
100 107 send,
101 108 currentModal,
... ...