Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
f732b569
提交
f732b569
authored
6月 02, 2021
作者:
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(modal): add redoModalHeight for useModalInner
允许在Modal内部动态加载内容后重新调整高度
上级
9e2aa20d
隐藏空白字符变更
内嵌
并排
正在显示
4 个修改的文件
包含
58 行增加
和
13 行删除
+58
-13
useModal.ts
src/components/Modal/src/hooks/useModal.ts
+5
-0
types.ts
src/components/Modal/src/types.ts
+1
-0
Modal1.vue
src/views/demo/comp/modal/Modal1.vue
+43
-4
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
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论