Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
球球不吃虾
vue-vben-admin
提交
f732b569
V
vue-vben-admin
项目概览
球球不吃虾
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
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,体验更适合开发者的 AI 搜索 >>
提交
f732b569
编写于
6月 02, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(modal): add redoModalHeight for useModalInner
允许在Modal内部动态加载内容后重新调整高度
上级
9e2aa20d
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
58 addition
and
13 deletion
+58
-13
src/components/Modal/src/hooks/useModal.ts
src/components/Modal/src/hooks/useModal.ts
+5
-0
src/components/Modal/src/types.ts
src/components/Modal/src/types.ts
+1
-0
src/views/demo/comp/modal/Modal1.vue
src/views/demo/comp/modal/Modal1.vue
+43
-4
src/views/demo/comp/modal/index.vue
src/views/demo/comp/modal/index.vue
+9
-9
未找到文件。
src/components/Modal/src/hooks/useModal.ts
浏览文件 @
f732b569
...
...
@@ -150,6 +150,11 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
setModalProps
:
(
props
:
Partial
<
ModalProps
>
)
=>
{
getInstance
()?.
setModalProps
(
props
);
},
redoModalHeight
:
()
=>
{
const
callRedo
=
getInstance
()?.
redoModalHeight
;
callRedo
&&
callRedo
();
},
},
];
};
src/components/Modal/src/types.ts
浏览文件 @
f732b569
...
...
@@ -23,6 +23,7 @@ export interface ReturnInnerMethods extends ModalMethods {
changeLoading
:
(
loading
:
boolean
)
=>
void
;
changeOkLoading
:
(
loading
:
boolean
)
=>
void
;
getVisible
?:
ComputedRef
<
boolean
>
;
redoModalHeight
:
()
=>
void
;
}
export
type
UseModalInnerReturnType
=
[
RegisterFn
,
ReturnInnerMethods
];
...
...
src/views/demo/comp/modal/Modal1.vue
浏览文件 @
f732b569
<
template
>
<BasicModal
v-bind=
"$attrs"
title=
"Modal Title"
:helpMessage=
"['提示1', '提示2']"
>
Modal Info.
<BasicModal
v-bind=
"$attrs"
destroyOnClose
@
register=
"register"
title=
"Modal Title"
:helpMessage=
"['提示1', '提示2']"
@
visible-change=
"handleShow"
>
<template
v-if=
"loading"
>
<div
class=
"empty-tips"
>
加载中,稍等3秒……
</div>
</
template
>
<
template
v-if=
"!loading"
>
<ul>
<li
v-for=
"index in lines"
:key=
"index"
>
加载完成
{{
index
}}
!
</li>
</ul>
</
template
>
</BasicModal>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
BasicModal
}
from
'
/@/components/Modal
'
;
import
{
defineComponent
,
ref
}
from
'
vue
'
;
import
{
BasicModal
,
useModalInner
}
from
'
/@/components/Modal
'
;
export
default
defineComponent
({
components
:
{
BasicModal
},
setup
()
{
const
loading
=
ref
(
true
);
const
lines
=
ref
(
10
);
const
[
register
,
{
setModalProps
,
redoModalHeight
}]
=
useModalInner
();
function
handleShow
(
visible
:
boolean
)
{
if
(
visible
)
{
loading
.
value
=
true
;
setModalProps
({
loading
:
true
});
setTimeout
(()
=>
{
lines
.
value
=
Math
.
round
(
Math
.
random
()
*
20
+
10
);
loading
.
value
=
false
;
setModalProps
({
loading
:
false
});
redoModalHeight
();
},
3000
);
}
}
return
{
register
,
loading
,
handleShow
,
lines
};
},
});
</
script
>
<
style
scoped
>
.empty-tips
{
height
:
100px
;
line-height
:
100px
;
text-align
:
center
;
}
</
style
>
src/views/demo/comp/modal/index.vue
浏览文件 @
f732b569
...
...
@@ -2,11 +2,11 @@
<PageWrapper
title=
"modal组件使用示例"
>
<Alert
message=
"使用 useModal 进行弹窗操作,默认可以拖动,可以通过 draggable
参数进行控制是否可以拖动/全屏"
参数进行控制是否可以拖动/全屏
,并演示了在Modal内动态加载内容并自动调整高度
"
show-icon
/>
<a-button
type=
"primary"
class=
"my-4"
@
click=
"openModalLoading"
>
打开弹窗
默认可以拖动/全屏
打开弹窗
,加载动态数据并自动调整高度(默认可以拖动/全屏)
</a-button>
<Alert
message=
"内外同时同时显示隐藏"
show-icon
/>
...
...
@@ -20,7 +20,7 @@
/>
<a-button
type=
"primary"
class=
"my-4"
@
click=
"send"
>
打开弹窗并传递数据
</a-button>
<Modal1
@
register=
"register1"
/>
<Modal1
@
register=
"register1"
:minHeight=
"100"
/>
<Modal2
@
register=
"register2"
/>
<Modal3
@
register=
"register3"
/>
<Modal4
@
register=
"register4"
/>
...
...
@@ -39,7 +39,7 @@
export
default
defineComponent
({
components
:
{
Alert
,
Modal1
,
Modal2
,
Modal3
,
Modal4
,
PageWrapper
},
setup
()
{
const
[
register1
,
{
openModal
:
openModal1
,
setModalProps
}]
=
useModal
();
const
[
register1
,
{
openModal
:
openModal1
}]
=
useModal
();
const
[
register2
,
{
openModal
:
openModal2
}]
=
useModal
();
const
[
register3
,
{
openModal
:
openModal3
}]
=
useModal
();
const
[
register4
,
{
openModal
:
openModal4
}]
=
useModal
();
...
...
@@ -50,11 +50,11 @@
});
}
function
openModalLoading
()
{
openModal1
();
setModalProps
({
loading
:
true
});
setTimeout
(()
=>
{
setModalProps
({
loading
:
false
});
},
2000
);
openModal1
(
true
);
//
setModalProps({ loading: true });
//
setTimeout(() => {
//
setModalProps({ loading: false });
//
}, 2000);
}
return
{
register1
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录