Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
剑九 六千里
vue-vben-admin
提交
e1c47233
V
vue-vben-admin
项目概览
剑九 六千里
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
1
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e1c47233
编写于
7月 23, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(demo): multi-modal used with dynamic component
修复以动态组件的方式使用多个modal的演示
上级
956ed2e3
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
39 addition
and
14 deletion
+39
-14
src/views/demo/comp/modal/Modal4.vue
src/views/demo/comp/modal/Modal4.vue
+27
-9
src/views/demo/comp/modal/index.vue
src/views/demo/comp/modal/index.vue
+12
-5
未找到文件。
src/views/demo/comp/modal/Modal4.vue
浏览文件 @
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
浏览文件 @
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
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录