Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
啊嘞嘞EC
vue-vben-admin
提交
a3a903bc
V
vue-vben-admin
项目概览
啊嘞嘞EC
/
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 搜索 >>
提交
a3a903bc
编写于
2月 07, 2021
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(modal): exporse redoModalHeight
上级
33b2365f
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
41 addition
and
2 deletion
+41
-2
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+4
-0
src/components/Modal/src/BasicModal.vue
src/components/Modal/src/BasicModal.vue
+16
-0
src/components/Modal/src/components/ModalWrapper.vue
src/components/Modal/src/components/ModalWrapper.vue
+11
-2
src/components/Modal/src/hooks/useModal.ts
src/components/Modal/src/hooks/useModal.ts
+5
-0
src/components/Modal/src/props.ts
src/components/Modal/src/props.ts
+1
-0
src/components/Modal/src/types.ts
src/components/Modal/src/types.ts
+2
-0
src/components/Table/src/BasicTable.vue
src/components/Table/src/BasicTable.vue
+1
-0
src/views/demo/page/form/high/PersonTable.vue
src/views/demo/page/form/high/PersonTable.vue
+1
-0
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
a3a903bc
## Wip
### ✨ Features
-
useModal 新增返回值函数
`redoModalHeight`
,用于在 modal 内为动态内容时刷新 modal 高度
### 🐛 Bug Fixes
-
修复 Upload 组件 maxNumber 失效问题
...
...
src/components/Modal/src/BasicModal.vue
浏览文件 @
a3a903bc
...
...
@@ -55,6 +55,7 @@
watchEffect
,
toRef
,
getCurrentInstance
,
nextTick
,
}
from
'
vue
'
;
import
Modal
from
'
./components/Modal
'
;
...
...
@@ -68,6 +69,7 @@
import
{
basicProps
}
from
'
./props
'
;
import
{
useFullScreen
}
from
'
./hooks/useModalFullScreen
'
;
import
{
omit
}
from
'
lodash-es
'
;
export
default
defineComponent
({
name
:
'
BasicModal
'
,
...
...
@@ -79,12 +81,21 @@
const
visibleRef
=
ref
(
false
);
const
propsRef
=
ref
<
Partial
<
ModalProps
>
|
null
>
(
null
);
const
modalWrapperRef
=
ref
<
ComponentRef
>
(
null
);
// modal Bottom and top height
const
extHeightRef
=
ref
(
0
);
const
modalMethods
:
ModalMethods
=
{
setModalProps
,
emitVisible
:
undefined
,
redoModalHeight
:
()
=>
{
nextTick
(()
=>
{
if
(
unref
(
modalWrapperRef
))
{
(
unref
(
modalWrapperRef
)
as
any
).
setModalHeight
();
}
});
},
};
const
instance
=
getCurrentInstance
();
if
(
instance
)
{
emit
(
'
register
'
,
modalMethods
,
instance
.
uid
);
...
...
@@ -135,6 +146,11 @@
(
v
)
=>
{
emit
(
'
visible-change
'
,
v
);
instance
&&
modalMethods
.
emitVisible
?.(
v
,
instance
.
uid
);
nextTick
(()
=>
{
if
(
props
.
scrollTop
&&
v
&&
unref
(
modalWrapperRef
))
{
(
unref
(
modalWrapperRef
)
as
any
).
scrollTop
();
}
});
},
{
immediate
:
false
,
...
...
src/components/Modal/src/components/ModalWrapper.vue
浏览文件 @
a3a903bc
...
...
@@ -55,7 +55,7 @@
let
stopElResizeFn
:
Fn
=
()
=>
{};
useWindowSizeFn
(
setModalHeight
);
useWindowSizeFn
(
setModalHeight
.
bind
(
null
,
false
)
);
createModalContext
({
redoModalHeight
:
setModalHeight
,
...
...
@@ -97,12 +97,21 @@
stopElResizeFn
&&
stopElResizeFn
();
});
async
function
scrollTop
()
{
nextTick
(()
=>
{
const
wrapperRefDom
=
unref
(
wrapperRef
);
if
(
!
wrapperRefDom
)
return
;
(
wrapperRefDom
as
any
)?.
scrollTo
?.(
0
);
});
}
async
function
setModalHeight
()
{
// 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
// 加上这个,就必须在使用的时候传递父级的visible
if
(
!
props
.
visible
)
return
;
const
wrapperRefDom
=
unref
(
wrapperRef
);
if
(
!
wrapperRefDom
)
return
;
const
bodyDom
=
wrapperRefDom
.
$el
.
parentElement
;
if
(
!
bodyDom
)
return
;
bodyDom
.
style
.
padding
=
'
0
'
;
...
...
@@ -150,7 +159,7 @@
}
}
return
{
wrapperRef
,
spinRef
,
spinStyle
};
return
{
wrapperRef
,
spinRef
,
spinStyle
,
scrollTop
,
setModalHeight
};
},
});
</
script
>
src/components/Modal/src/hooks/useModal.ts
浏览文件 @
a3a903bc
...
...
@@ -64,10 +64,15 @@ export function useModal(): UseModalReturnType {
setModalProps
:
(
props
:
Partial
<
ModalProps
>
):
void
=>
{
getInstance
()?.
setModalProps
(
props
);
},
getVisible
:
computed
(():
boolean
=>
{
return
visibleData
[
~~
unref
(
uidRef
)];
}),
redoModalHeight
:
()
=>
{
getInstance
()?.
redoModalHeight
?.();
},
openModal
:
<
T
=
any
>
(
visible
=
true
,
data
?:
T
,
openOnSet
=
true
):
void
=>
{
getInstance
()?.
setModalProps
({
visible
:
visible
,
...
...
src/components/Modal/src/props.ts
浏览文件 @
a3a903bc
...
...
@@ -8,6 +8,7 @@ const { t } = useI18n();
export
const
modalProps
=
{
visible
:
propTypes
.
bool
,
scrollTop
:
propTypes
.
bool
.
def
(
true
),
height
:
propTypes
.
number
,
minHeight
:
propTypes
.
number
,
// open drag
...
...
src/components/Modal/src/types.ts
浏览文件 @
a3a903bc
...
...
@@ -6,6 +6,7 @@ import type { CSSProperties, VNodeChild, ComputedRef } from 'vue';
export
interface
ModalMethods
{
setModalProps
:
(
props
:
Partial
<
ModalProps
>
)
=>
void
;
emitVisible
?:
(
visible
:
boolean
,
uid
:
number
)
=>
void
;
redoModalHeight
?:
()
=>
void
;
}
export
type
RegisterFn
=
(
modalMethods
:
ModalMethods
,
uuid
?:
string
)
=>
void
;
...
...
@@ -32,6 +33,7 @@ export interface ModalProps {
// 启用wrapper后 底部可以适当增加高度
wrapperFooterOffset
?:
number
;
draggable
?:
boolean
;
scrollTop
?:
boolean
;
// 是否可以进行全屏
canFullscreen
?:
boolean
;
...
...
src/components/Table/src/BasicTable.vue
浏览文件 @
a3a903bc
...
...
@@ -205,6 +205,7 @@
if
(
slots
.
expandedRowRender
)
{
propsData
=
omit
(
propsData
,
'
scroll
'
);
}
return
propsData
;
});
...
...
src/views/demo/page/form/high/PersonTable.vue
浏览文件 @
a3a903bc
...
...
@@ -98,6 +98,7 @@
dept
:
''
,
editable
:
true
,
isNew
:
true
,
key
:
`
${
Date
.
now
()}
`
,
};
data
.
push
(
addRow
);
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录