Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
N
najiu-admin-template
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
najiu-frontend
najiu-admin-template
Commits
e1c47233
Commit
e1c47233
authored
Jul 23, 2021
by
无木
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix(demo): multi-modal used with dynamic component
修复以动态组件的方式使用多个modal的演示
parent
956ed2e3
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
39 additions
and
14 deletions
+39
-14
Modal4.vue
src/views/demo/comp/modal/Modal4.vue
+27
-9
index.vue
src/views/demo/comp/modal/index.vue
+12
-5
No files found.
src/views/demo/comp/modal/Modal4.vue
View file @
e1c47233
<
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
>
src/views/demo/comp/modal/index.vue
View file @
e1c47233
...
...
@@ -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
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment