Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
啊嘞嘞EC
vue-vben-admin
提交
fb0c7763
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,发现更多精彩内容 >>
提交
fb0c7763
编写于
10月 29, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(modal): fix modal not showing footer
上级
2f1fbf8e
变更
12
隐藏空白更改
内联
并排
Showing
12 changed file
with
130 addition
and
115 deletion
+130
-115
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+7
-0
src/components/Authority/src/index.vue
src/components/Authority/src/index.vue
+2
-1
src/components/Basic/src/BasicArrow.vue
src/components/Basic/src/BasicArrow.vue
+1
-3
src/components/Basic/src/BasicHelp.vue
src/components/Basic/src/BasicHelp.vue
+5
-3
src/components/Basic/src/BasicTitle.vue
src/components/Basic/src/BasicTitle.vue
+5
-2
src/components/Breadcrumb/BreadcrumbItem.vue
src/components/Breadcrumb/BreadcrumbItem.vue
+2
-0
src/components/Modal/src/BasicModal.tsx
src/components/Modal/src/BasicModal.tsx
+40
-38
src/components/Modal/src/Modal.tsx
src/components/Modal/src/Modal.tsx
+2
-2
src/components/Modal/src/ModalWrapper.tsx
src/components/Modal/src/ModalWrapper.tsx
+52
-57
src/components/Modal/src/index.less
src/components/Modal/src/index.less
+1
-4
src/components/Modal/src/useModal.ts
src/components/Modal/src/useModal.ts
+12
-3
src/components/registerGlobComp.ts
src/components/registerGlobComp.ts
+1
-2
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
fb0c7763
## Wip
## Wip
### 🎫 Chores
-
添加部分注释
-
pwa 图标补充
-
types 类型调整
### 🐛 Bug Fixes
### 🐛 Bug Fixes
-
修复本地代理 post 接口到 https 地址超时错误
-
修复本地代理 post 接口到 https 地址超时错误
-
修复 modal 在不显示 footer 的时候全屏高度计算问题
## 2.0.0-rc.6 (2020-10-28)
## 2.0.0-rc.6 (2020-10-28)
...
...
src/components/Authority/src/index.vue
浏览文件 @
fb0c7763
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
PropType
,
computed
,
unref
}
from
'
vue
'
;
import
type
{
PropType
}
from
'
vue
'
;
import
{
defineComponent
,
computed
,
unref
}
from
'
vue
'
;
import
{
PermissionModeEnum
}
from
'
/@/enums/appEnum
'
;
import
{
PermissionModeEnum
}
from
'
/@/enums/appEnum
'
;
import
{
RoleEnum
}
from
'
/@/enums/roleEnum
'
;
import
{
RoleEnum
}
from
'
/@/enums/roleEnum
'
;
...
...
src/components/Basic/src/BasicArrow.vue
浏览文件 @
fb0c7763
...
@@ -7,11 +7,10 @@
...
@@ -7,11 +7,10 @@
import
type
{
PropType
}
from
'
vue
'
;
import
type
{
PropType
}
from
'
vue
'
;
import
{
defineComponent
,
computed
}
from
'
vue
'
;
import
{
defineComponent
,
computed
}
from
'
vue
'
;
import
{
RightOutlined
}
from
'
@ant-design/icons-vue
'
;
import
{
RightOutlined
}
from
'
@ant-design/icons-vue
'
;
export
default
defineComponent
({
export
default
defineComponent
({
name
:
'
Bas
e
Arrow
'
,
name
:
'
Bas
ic
Arrow
'
,
components
:
{
RightOutlined
},
components
:
{
RightOutlined
},
props
:
{
props
:
{
// Expand contract, expand by default
// Expand contract, expand by default
...
@@ -24,7 +23,6 @@
...
@@ -24,7 +23,6 @@
const
getClass
=
computed
(()
=>
{
const
getClass
=
computed
(()
=>
{
const
preCls
=
'
base-arrow
'
;
const
preCls
=
'
base-arrow
'
;
const
cls
=
[
preCls
];
const
cls
=
[
preCls
];
props
.
expand
&&
cls
.
push
(
`
${
preCls
}
__active`
);
props
.
expand
&&
cls
.
push
(
`
${
preCls
}
__active`
);
return
cls
;
return
cls
;
});
});
...
...
src/components/Basic/src/BasicHelp.vue
浏览文件 @
fb0c7763
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
type
{
PropType
}
from
'
vue
'
;
import
type
{
PropType
}
from
'
vue
'
;
import
{
defineComponent
,
computed
,
unref
,
h
}
from
'
vue
'
;
import
{
Tooltip
}
from
'
ant-design-vue
'
;
import
{
Tooltip
}
from
'
ant-design-vue
'
;
import
{
InfoCircleOutlined
}
from
'
@ant-design/icons-vue
'
;
import
{
InfoCircleOutlined
}
from
'
@ant-design/icons-vue
'
;
import
{
defineComponent
,
computed
,
unref
,
h
}
from
'
vue
'
;
import
{
getPopupContainer
}
from
'
/@/utils
'
;
import
{
getPopupContainer
}
from
'
/@/utils
'
;
import
{
isString
,
isArray
}
from
'
/@/utils/is
'
;
import
{
isString
,
isArray
}
from
'
/@/utils/is
'
;
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
export
default
defineComponent
({
export
default
defineComponent
({
name
:
'
Bas
e
Help
'
,
name
:
'
Bas
ic
Help
'
,
components
:
{
Tooltip
},
components
:
{
Tooltip
},
props
:
{
props
:
{
// max-width
// max-width
...
@@ -56,12 +55,14 @@
...
@@ -56,12 +55,14 @@
maxWidth
:
props
.
maxWidth
,
maxWidth
:
props
.
maxWidth
,
};
};
});
});
const
getWrapStyleRef
=
computed
(()
=>
{
const
getWrapStyleRef
=
computed
(()
=>
{
return
{
return
{
color
:
props
.
color
,
color
:
props
.
color
,
fontSize
:
props
.
fontSize
,
fontSize
:
props
.
fontSize
,
};
};
});
});
const
getMainStyleRef
=
computed
(()
=>
{
const
getMainStyleRef
=
computed
(()
=>
{
return
props
.
absolute
?
props
.
position
:
{};
return
props
.
absolute
?
props
.
position
:
{};
});
});
...
@@ -81,6 +82,7 @@
...
@@ -81,6 +82,7 @@
}
}
return
null
;
return
null
;
};
};
return
()
=>
{
return
()
=>
{
return
h
(
return
h
(
Tooltip
,
Tooltip
,
...
...
src/components/Basic/src/BasicTitle.vue
浏览文件 @
fb0c7763
<
template
>
<
template
>
<span
class=
"base-title"
:class=
"
{ 'show-span': showSpan
&&
$slots.default }">
<span
class=
"base-title"
:class=
"
{ 'show-span': showSpan
&&
$slots.default }">
<slot
/>
<slot
/>
<Bas
e
Help
class=
"base-title__help"
v-if=
"helpMessage"
:text=
"helpMessage"
/>
<Bas
ic
Help
class=
"base-title__help"
v-if=
"helpMessage"
:text=
"helpMessage"
/>
</span>
</span>
</
template
>
</
template
>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
...
@@ -9,8 +9,11 @@
...
@@ -9,8 +9,11 @@
import
{
defineComponent
}
from
'
vue
'
;
import
{
defineComponent
}
from
'
vue
'
;
import
BasicHelp
from
'
./BasicHelp.vue
'
;
export
default
defineComponent
({
export
default
defineComponent
({
name
:
'
BaseTitle
'
,
name
:
'
BasicTitle
'
,
components
:
{
BasicHelp
},
props
:
{
props
:
{
helpMessage
:
{
helpMessage
:
{
type
:
[
String
,
Array
]
as
PropType
<
string
|
string
[]
>
,
type
:
[
String
,
Array
]
as
PropType
<
string
|
string
[]
>
,
...
...
src/components/Breadcrumb/BreadcrumbItem.vue
浏览文件 @
fb0c7763
...
@@ -31,10 +31,12 @@
...
@@ -31,10 +31,12 @@
},
},
setup
(
props
)
{
setup
(
props
)
{
const
linkRef
=
ref
<
Nullable
<
HTMLElement
>>
(
null
);
const
linkRef
=
ref
<
Nullable
<
HTMLElement
>>
(
null
);
const
parent
=
inject
(
'
breadcrumb
'
)
as
{
const
parent
=
inject
(
'
breadcrumb
'
)
as
{
separator
:
string
;
separator
:
string
;
separatorClass
:
string
;
separatorClass
:
string
;
};
};
const
{
push
,
replace
}
=
useRouter
();
const
{
push
,
replace
}
=
useRouter
();
onMounted
(()
=>
{
onMounted
(()
=>
{
...
...
src/components/Modal/src/BasicModal.tsx
浏览文件 @
fb0c7763
import
type
{
ModalProps
,
ModalMethods
}
from
'
./types
'
;
import
type
{
ModalProps
,
ModalMethods
}
from
'
./types
'
;
import
{
defineComponent
,
computed
,
ref
,
watch
,
unref
,
watchEffect
}
from
'
vue
'
;
import
Modal
from
'
./Modal
'
;
import
Modal
from
'
./Modal
'
;
import
{
Button
}
from
'
ant-design-
vue
'
;
import
Button
from
'
/@/components/Button/index.
vue
'
;
import
ModalWrapper
from
'
./ModalWrapper
'
;
import
ModalWrapper
from
'
./ModalWrapper
'
;
import
{
BasicTitle
}
from
'
/@/components/Basic
'
;
import
{
BasicTitle
}
from
'
/@/components/Basic
'
;
import
{
defineComponent
,
computed
,
ref
,
watch
,
unref
,
watchEffect
}
from
'
vue
'
;
import
{
FullscreenExitOutlined
,
FullscreenOutlined
,
CloseOutlined
}
from
'
@ant-design/icons-vue
'
;
import
{
FullscreenExitOutlined
,
FullscreenOutlined
,
CloseOutlined
}
from
'
@ant-design/icons-vue
'
;
import
{
basicProps
}
from
'
./props
'
;
import
{
getSlot
,
extendSlots
}
from
'
/@/utils/helper/tsxHelper
'
;
import
{
getSlot
,
extendSlots
}
from
'
/@/utils/helper/tsxHelper
'
;
import
{
isFunction
}
from
'
/@/utils/is
'
;
import
{
isFunction
}
from
'
/@/utils/is
'
;
import
{
deepMerge
}
from
'
/@/utils
'
;
import
{
deepMerge
}
from
'
/@/utils
'
;
import
{
buildUUID
}
from
'
/@/utils/uuid
'
;
import
{
buildUUID
}
from
'
/@/utils/uuid
'
;
import
{
basicProps
}
from
'
./props
'
;
// import { triggerWindowResize } from '@/utils/event/triggerWindowResizeEvent';
// import { triggerWindowResize } from '@/utils/event/triggerWindowResizeEvent';
export
default
defineComponent
({
export
default
defineComponent
({
name
:
'
BasicModal
'
,
name
:
'
BasicModal
'
,
...
@@ -22,18 +21,14 @@ export default defineComponent({
...
@@ -22,18 +21,14 @@ export default defineComponent({
emits
:
[
'
visible-change
'
,
'
height-change
'
,
'
cancel
'
,
'
ok
'
,
'
register
'
],
emits
:
[
'
visible-change
'
,
'
height-change
'
,
'
cancel
'
,
'
ok
'
,
'
register
'
],
setup
(
props
,
{
slots
,
emit
,
attrs
})
{
setup
(
props
,
{
slots
,
emit
,
attrs
})
{
const
visibleRef
=
ref
(
false
);
const
visibleRef
=
ref
(
false
);
const
propsRef
=
ref
<
Partial
<
ModalProps
>
|
null
>
(
null
);
const
propsRef
=
ref
<
Partial
<
ModalProps
>
|
null
>
(
null
);
const
modalWrapperRef
=
ref
<
any
>
(
null
);
const
modalWrapperRef
=
ref
<
any
>
(
null
);
// modal Bottom and top height
// modal Bottom and top height
const
extHeightRef
=
ref
(
0
);
const
extHeightRef
=
ref
(
0
);
// Unexpanded height of the popup
// Unexpanded height of the popup
const
formerHeightRef
=
ref
(
0
);
const
formerHeightRef
=
ref
(
0
);
const
fullScreenRef
=
ref
(
false
);
const
fullScreenRef
=
ref
(
false
);
// Custom title component: get title
// Custom title component: get title
const
getMergeProps
=
computed
(()
=>
{
const
getMergeProps
=
computed
(()
=>
{
return
{
return
{
...
@@ -41,6 +36,7 @@ export default defineComponent({
...
@@ -41,6 +36,7 @@ export default defineComponent({
...(
unref
(
propsRef
)
as
any
),
...(
unref
(
propsRef
)
as
any
),
};
};
});
});
// modal component does not need title
// modal component does not need title
const
getProps
=
computed
(():
any
=>
{
const
getProps
=
computed
(():
any
=>
{
const
opt
=
{
const
opt
=
{
...
@@ -56,9 +52,11 @@ export default defineComponent({
...
@@ -56,9 +52,11 @@ export default defineComponent({
wrapClassName
:
className
,
wrapClassName
:
className
,
};
};
});
});
watchEffect
(()
=>
{
watchEffect
(()
=>
{
visibleRef
.
value
=
!!
props
.
visible
;
visibleRef
.
value
=
!!
props
.
visible
;
});
});
watch
(
watch
(
()
=>
unref
(
visibleRef
),
()
=>
unref
(
visibleRef
),
(
v
)
=>
{
(
v
)
=>
{
...
@@ -68,6 +66,7 @@ export default defineComponent({
...
@@ -68,6 +66,7 @@ export default defineComponent({
immediate
:
false
,
immediate
:
false
,
}
}
);
);
/**
/**
* @description: 渲染标题
* @description: 渲染标题
*/
*/
...
@@ -83,13 +82,17 @@ export default defineComponent({
...
@@ -83,13 +82,17 @@ export default defineComponent({
function
renderContent
()
{
function
renderContent
()
{
const
{
useWrapper
,
loading
,
wrapperProps
}
=
unref
(
getProps
);
const
{
useWrapper
,
loading
,
wrapperProps
}
=
unref
(
getProps
);
return
useWrapper
?
(
if
(
!
useWrapper
)
return
getSlot
(
slots
);
const
showFooter
=
props
.
footer
!==
undefined
&&
!
props
.
footer
?
0
:
undefined
;
return
(
<
ModalWrapper
<
ModalWrapper
footerOffset
=
{
props
.
wrapperFooterOffset
}
footerOffset
=
{
props
.
wrapperFooterOffset
}
fullScreen
=
{
unref
(
fullScreenRef
)
}
fullScreen
=
{
unref
(
fullScreenRef
)
}
ref
=
{
modalWrapperRef
}
ref
=
{
modalWrapperRef
}
loading
=
{
loading
}
loading
=
{
loading
}
visible
=
{
unref
(
visibleRef
)
}
visible
=
{
unref
(
visibleRef
)
}
modalFooterHeight
=
{
showFooter
}
{
...
wrapperProps
}
{
...
wrapperProps
}
onGetExtHeight
=
{
(
height
:
number
)
=>
{
onGetExtHeight
=
{
(
height
:
number
)
=>
{
extHeightRef
.
value
=
height
;
extHeightRef
.
value
=
height
;
...
@@ -100,13 +103,12 @@ export default defineComponent({
...
@@ -100,13 +103,12 @@ export default defineComponent({
>
>
{
()
=>
getSlot
(
slots
)
}
{
()
=>
getSlot
(
slots
)
}
</
ModalWrapper
>
</
ModalWrapper
>
)
:
(
getSlot
(
slots
)
);
);
}
}
// 取消事件
// 取消事件
async
function
handleCancel
(
e
:
Event
)
{
async
function
handleCancel
(
e
:
Event
)
{
e
.
stopPropagation
();
e
&&
e
.
stopPropagation
();
if
(
props
.
closeFunc
&&
isFunction
(
props
.
closeFunc
))
{
if
(
props
.
closeFunc
&&
isFunction
(
props
.
closeFunc
))
{
const
isClose
:
boolean
=
await
props
.
closeFunc
();
const
isClose
:
boolean
=
await
props
.
closeFunc
();
visibleRef
.
value
=
!
isClose
;
visibleRef
.
value
=
!
isClose
;
...
@@ -115,6 +117,7 @@ export default defineComponent({
...
@@ -115,6 +117,7 @@ export default defineComponent({
visibleRef
.
value
=
false
;
visibleRef
.
value
=
false
;
emit
(
'
cancel
'
);
emit
(
'
cancel
'
);
}
}
// 底部按钮自定义实现,
// 底部按钮自定义实现,
function
renderFooter
()
{
function
renderFooter
()
{
const
{
const
{
...
@@ -131,7 +134,6 @@ export default defineComponent({
...
@@ -131,7 +134,6 @@ export default defineComponent({
return
(
return
(
<>
<>
{
getSlot
(
slots
,
'
insertFooter
'
)
}
{
getSlot
(
slots
,
'
insertFooter
'
)
}
{
showCancelBtn
&&
(
{
showCancelBtn
&&
(
<
Button
{
...
cancelButtonProps
}
onClick
=
{
handleCancel
}
>
<
Button
{
...
cancelButtonProps
}
onClick
=
{
handleCancel
}
>
{
()
=>
cancelText
}
{
()
=>
cancelText
}
...
@@ -150,11 +152,11 @@ export default defineComponent({
...
@@ -150,11 +152,11 @@ export default defineComponent({
{
()
=>
okText
}
{
()
=>
okText
}
</
Button
>
</
Button
>
)
}
)
}
{
getSlot
(
slots
,
'
appendFooter
'
)
}
{
getSlot
(
slots
,
'
appendFooter
'
)
}
</>
</>
);
);
}
}
/**
/**
* @description: 关闭按钮
* @description: 关闭按钮
*/
*/
...
@@ -176,27 +178,26 @@ export default defineComponent({
...
@@ -176,27 +178,26 @@ export default defineComponent({
}
}
function
handleFullScreen
(
e
:
Event
)
{
function
handleFullScreen
(
e
:
Event
)
{
e
.
stopPropagation
();
e
&&
e
.
stopPropagation
();
fullScreenRef
.
value
=
!
unref
(
fullScreenRef
);
fullScreenRef
.
value
=
!
unref
(
fullScreenRef
);
const
modalWrapper
=
unref
(
modalWrapperRef
);
const
modalWrapper
=
unref
(
modalWrapperRef
);
if
(
modalWrapper
)
{
if
(
!
modalWrapper
)
return
;
const
modalWrapSpinEl
=
(
modalWrapper
.
$el
as
HTMLElement
).
querySelector
(
'
.ant-spin-nested-loading
'
const
wrapperEl
=
modalWrapper
.
$el
as
HTMLElement
;
);
if
(
!
wrapperEl
)
return
;
if
(
modalWrapSpinEl
)
{
if
(
!
unref
(
formerHeightRef
)
&&
unref
(
fullScreenRef
))
{
const
modalWrapSpinEl
=
wrapperEl
.
querySelector
(
'
.ant-spin-nested-loading
'
)
as
HTMLElement
;
formerHeightRef
.
value
=
(
modalWrapSpinEl
as
HTMLElement
).
offsetHeight
;
if
(
!
modalWrapSpinEl
)
return
;
console
.
log
(
formerHeightRef
);
}
if
(
!
unref
(
formerHeightRef
)
&&
unref
(
fullScreenRef
))
{
if
(
unref
(
fullScreenRef
))
{
formerHeightRef
.
value
=
modalWrapSpinEl
.
offsetHeight
;
(
modalWrapSpinEl
as
HTMLElement
).
style
.
height
=
`
${
}
window
.
innerHeight
-
unref
(
extHeightRef
)
}
px`
;
if
(
unref
(
fullScreenRef
))
{
}
else
{
modalWrapSpinEl
.
style
.
height
=
`
${
window
.
innerHeight
-
unref
(
extHeightRef
)}
px`
;
(
modalWrapSpinEl
as
HTMLElement
).
style
.
height
=
`
${
unref
(
formerHeightRef
)}
px`
;
}
else
{
}
modalWrapSpinEl
.
style
.
height
=
`
${
unref
(
formerHeightRef
)}
px`
;
}
}
}
}
}
...
@@ -206,21 +207,22 @@ export default defineComponent({
...
@@ -206,21 +207,22 @@ export default defineComponent({
function
setModalProps
(
props
:
Partial
<
ModalProps
>
):
void
{
function
setModalProps
(
props
:
Partial
<
ModalProps
>
):
void
{
// Keep the last setModalProps
// Keep the last setModalProps
propsRef
.
value
=
deepMerge
(
unref
(
propsRef
)
||
{},
props
);
propsRef
.
value
=
deepMerge
(
unref
(
propsRef
)
||
{},
props
);
if
(
Reflect
.
has
(
props
,
'
visible
'
))
{
if
(
!
Reflect
.
has
(
props
,
'
visible
'
))
return
;
visibleRef
.
value
=
!!
props
.
visible
;
visibleRef
.
value
=
!!
props
.
visible
;
}
}
}
const
modalMethods
:
ModalMethods
=
{
const
modalMethods
:
ModalMethods
=
{
setModalProps
,
setModalProps
,
};
};
const
uuid
=
buildUUID
();
const
uuid
=
buildUUID
();
emit
(
'
register
'
,
modalMethods
,
uuid
);
emit
(
'
register
'
,
modalMethods
,
uuid
);
return
()
=>
(
return
()
=>
(
<
Modal
<
Modal
onCancel
=
{
handleCancel
}
onCancel
=
{
handleCancel
}
{
...{
...
attrs
,
...
props
,
...
unref
(
getProps
)
}
}
getContainer
=
{
()
=>
document
.
querySelector
(
'
.default-layout__main
'
)
}
getContainer
=
{
()
=>
document
.
querySelector
(
'
.default-layout__main
'
)
}
{
...{
...
attrs
,
...
props
,
...
unref
(
getProps
)
}
}
>
>
{
{
{
{
...
extendSlots
(
slots
,
[
'
default
'
]),
...
extendSlots
(
slots
,
[
'
default
'
]),
...
...
src/components/Modal/src/Modal.tsx
浏览文件 @
fb0c7763
...
@@ -23,6 +23,7 @@ export default defineComponent({
...
@@ -23,6 +23,7 @@ export default defineComponent({
dialogHeaderEl
.
style
.
cursor
=
'
move
'
;
dialogHeaderEl
.
style
.
cursor
=
'
move
'
;
dialogHeaderEl
.
onmousedown
=
(
e
:
any
)
=>
{
dialogHeaderEl
.
onmousedown
=
(
e
:
any
)
=>
{
if
(
!
e
)
return
;
// 鼠标按下,计算当前元素距离可视区的距离
// 鼠标按下,计算当前元素距离可视区的距离
const
disX
=
e
.
clientX
;
const
disX
=
e
.
clientX
;
const
disY
=
e
.
clientY
;
const
disY
=
e
.
clientY
;
...
@@ -84,8 +85,8 @@ export default defineComponent({
...
@@ -84,8 +85,8 @@ export default defineComponent({
const
handleDrag
=
()
=>
{
const
handleDrag
=
()
=>
{
const
dragWraps
=
document
.
querySelectorAll
(
'
.ant-modal-wrap
'
);
const
dragWraps
=
document
.
querySelectorAll
(
'
.ant-modal-wrap
'
);
for
(
const
wrap
of
dragWraps
as
any
)
{
for
(
const
wrap
of
dragWraps
as
any
)
{
if
(
!
wrap
)
continue
;
const
display
=
getStyle
(
wrap
,
'
display
'
);
const
display
=
getStyle
(
wrap
,
'
display
'
);
const
draggable
=
wrap
.
getAttribute
(
'
data-drag
'
);
const
draggable
=
wrap
.
getAttribute
(
'
data-drag
'
);
if
(
display
!==
'
none
'
)
{
if
(
display
!==
'
none
'
)
{
// 拖拽位置
// 拖拽位置
...
@@ -98,7 +99,6 @@ export default defineComponent({
...
@@ -98,7 +99,6 @@ export default defineComponent({
if
(
!
props
.
visible
)
{
if
(
!
props
.
visible
)
{
return
;
return
;
}
}
// context.$nextTick();
useTimeout
(()
=>
{
useTimeout
(()
=>
{
handleDrag
();
handleDrag
();
},
30
);
},
30
);
...
...
src/components/Modal/src/ModalWrapper.tsx
浏览文件 @
fb0c7763
...
@@ -13,10 +13,9 @@ import {
...
@@ -13,10 +13,9 @@ import {
onUnmounted
,
onUnmounted
,
}
from
'
vue
'
;
}
from
'
vue
'
;
import
{
Spin
}
from
'
ant-design-vue
'
;
import
{
Spin
}
from
'
ant-design-vue
'
;
import
{
ScrollContainer
}
from
'
/@/components/Container/index
'
;
import
{
useWindowSizeFn
}
from
'
/@/hooks/event/useWindowSize
'
;
import
{
useWindowSizeFn
}
from
'
/@/hooks/event/useWindowSize
'
;
import
{
useTimeout
}
from
'
/@/hooks/core/useTimeout
'
;
//
import { useTimeout } from '/@/hooks/core/useTimeout';
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
import
{
useElResize
}
from
'
/@/hooks/event/useElResize
'
;
import
{
useElResize
}
from
'
/@/hooks/event/useElResize
'
;
...
@@ -61,26 +60,46 @@ export default defineComponent({
...
@@ -61,26 +60,46 @@ export default defineComponent({
const
wrapStyle
=
computed
(()
=>
{
const
wrapStyle
=
computed
(()
=>
{
return
{
return
{
minHeight
:
`
${
props
.
minHeight
}
px`
,
minHeight
:
`
${
props
.
minHeight
}
px`
,
overflow
:
'
hidden
'
,
height
:
`
${
unref
(
realHeightRef
)}
px`
,
overflow
:
'
auto
'
,
};
};
});
});
// 重试次数
// 重试次数
let
tryCount
=
0
;
// let tryCount = 0;
let
stopElResizeFn
:
Fn
=
()
=>
{};
watchEffect
(()
=>
{
setModalHeight
();
});
watch
(
()
=>
props
.
fullScreen
,
(
v
)
=>
{
!
v
&&
setModalHeight
();
}
);
onMounted
(()
=>
{
const
{
modalHeaderHeight
,
modalFooterHeight
}
=
props
;
emit
(
'
getExtHeight
'
,
modalHeaderHeight
+
modalFooterHeight
);
listenElResize
();
});
onUnmounted
(()
=>
{
stopElResizeFn
&&
stopElResizeFn
();
});
useWindowSizeFn
(
setModalHeight
);
async
function
setModalHeight
()
{
async
function
setModalHeight
()
{
// 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
// 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
// 加上这个,就必须在使用的时候传递父级的visible
// 加上这个,就必须在使用的时候传递父级的visible
if
(
!
props
.
visible
)
{
if
(
!
props
.
visible
)
return
;
return
;
}
const
wrapperRefDom
=
unref
(
wrapperRef
);
const
wrapperRefDom
=
unref
(
wrapperRef
);
if
(
!
wrapperRefDom
)
{
if
(
!
wrapperRefDom
)
return
;
return
;
}
const
bodyDom
=
wrapperRefDom
.
parentElement
;
const
bodyDom
=
wrapperRefDom
.
parentElement
;
if
(
!
bodyDom
)
{
if
(
!
bodyDom
)
return
;
return
;
}
bodyDom
.
style
.
padding
=
'
0
'
;
bodyDom
.
style
.
padding
=
'
0
'
;
await
nextTick
();
await
nextTick
();
...
@@ -104,23 +123,23 @@ export default defineComponent({
...
@@ -104,23 +123,23 @@ export default defineComponent({
}
}
await
nextTick
();
await
nextTick
();
const
spinEl
=
unref
(
spinRef
);
const
spinEl
=
unref
(
spinRef
);
if
(
!
spinEl
)
{
//
if (!spinEl) {
useTimeout
(()
=>
{
//
useTimeout(() => {
// retry
//
// retry
if
(
tryCount
<
3
)
{
//
if (tryCount < 3) {
setModalHeight
();
//
setModalHeight();
}
//
}
tryCount
++
;
//
tryCount++;
},
10
);
//
}, 10);
return
;
//
return;
}
//
}
tryCount
=
0
;
//
tryCount = 0;
const
realHeight
=
(
spinEl
.
$el
.
querySelector
(
'
.ant-spin-container
'
)
as
HTMLElement
)
const
spinContainerEl
=
spinEl
.
$el
.
querySelector
(
'
.ant-spin-container
'
)
as
HTMLElement
;
.
scrollHeight
;
if
(
!
spinContainerEl
)
return
;
const
realHeight
=
spinContainerEl
.
scrollHeight
;
// 16为 p-2和m-2 加起来为4,基础4, 4*4=16
// 32 padding
if
(
props
.
fullScreen
)
{
if
(
props
.
fullScreen
)
{
realHeightRef
.
value
=
realHeightRef
.
value
=
window
.
innerHeight
-
props
.
modalFooterHeight
-
props
.
modalHeaderHeight
-
26
;
window
.
innerHeight
-
props
.
modalFooterHeight
-
props
.
modalHeaderHeight
-
26
;
...
@@ -138,6 +157,7 @@ export default defineComponent({
...
@@ -138,6 +157,7 @@ export default defineComponent({
console
.
log
(
error
);
console
.
log
(
error
);
}
}
}
}
function
listenElResize
()
{
function
listenElResize
()
{
const
wrapper
=
unref
(
wrapperRef
);
const
wrapper
=
unref
(
wrapperRef
);
if
(
!
wrapper
)
return
;
if
(
!
wrapper
)
return
;
...
@@ -146,41 +166,16 @@ export default defineComponent({
...
@@ -146,41 +166,16 @@ export default defineComponent({
const
[
start
,
stop
]
=
useElResize
(
container
,
()
=>
{
const
[
start
,
stop
]
=
useElResize
(
container
,
()
=>
{
setModalHeight
();
setModalHeight
();
});
});
stopElResizeFn
=
stop
;
start
();
start
();
onUnmounted
(()
=>
{
stop
();
});
}
}
nextTick
(()
=>
{});
watchEffect
(()
=>
{
setModalHeight
();
});
watch
(
()
=>
props
.
fullScreen
,
(
v
)
=>
{
!
v
&&
setModalHeight
();
}
);
onMounted
(()
=>
{
const
{
modalHeaderHeight
,
modalFooterHeight
}
=
props
;
emit
(
'
getExtHeight
'
,
modalHeaderHeight
+
modalFooterHeight
);
listenElResize
();
});
useWindowSizeFn
(
setModalHeight
);
return
()
=>
{
return
()
=>
{
const
height
=
unref
(
realHeightRef
);
return
(
return
(
<
div
ref
=
{
wrapperRef
}
style
=
{
unref
(
wrapStyle
)
}
>
<
div
ref
=
{
wrapperRef
}
style
=
{
unref
(
wrapStyle
)
}
>
<
ScrollContainer
>
<
Spin
ref
=
{
spinRef
}
spinning
=
{
props
.
loading
}
>
{
()
=>
(
{
()
=>
getSlot
(
slots
)
}
<
Spin
ref
=
{
spinRef
}
spinning
=
{
props
.
loading
}
style
=
{
{
height
:
`
${
height
}
px`
}
}
>
</
Spin
>
{
()
=>
getSlot
(
slots
)
}
</
Spin
>
)
}
</
ScrollContainer
>
</
div
>
</
div
>
);
);
};
};
...
...
src/components/Modal/src/index.less
浏览文件 @
fb0c7763
...
@@ -26,7 +26,7 @@
...
@@ -26,7 +26,7 @@
line-height: 16px;
line-height: 16px;
.base-title {
.base-title {
cursor: move;
cursor: move
!important
;
}
}
}
}
...
@@ -56,7 +56,6 @@
...
@@ -56,7 +56,6 @@
}
}
.ant-modal-body {
.ant-modal-body {
// background: #f1f2f6;
padding: 0;
padding: 0;
}
}
...
@@ -69,7 +68,6 @@
...
@@ -69,7 +68,6 @@
}
}
&-header {
&-header {
// padding: 12.5px 24px;
padding: 16px;
padding: 16px;
}
}
...
@@ -79,7 +77,6 @@
...
@@ -79,7 +77,6 @@
&-footer {
&-footer {
padding: 10px 26px 26px 16px;
padding: 10px 26px 26px 16px;
// border-top: none;
button + button {
button + button {
margin-left: 10px;
margin-left: 10px;
...
...
src/components/Modal/src/useModal.ts
浏览文件 @
fb0c7763
...
@@ -21,15 +21,15 @@ export function useModal(): UseModalReturnType {
...
@@ -21,15 +21,15 @@ export function useModal(): UseModalReturnType {
const
uidRef
=
ref
<
string
>
(
''
);
const
uidRef
=
ref
<
string
>
(
''
);
function
register
(
modalMethod
:
ModalMethods
,
uuid
:
string
)
{
function
register
(
modalMethod
:
ModalMethods
,
uuid
:
string
)
{
uidRef
.
value
=
uuid
;
uidRef
.
value
=
uuid
;
isProdMode
()
&&
isProdMode
()
&&
onUnmounted
(()
=>
{
onUnmounted
(()
=>
{
modalRef
.
value
=
null
;
modalRef
.
value
=
null
;
loadedRef
.
value
=
false
;
loadedRef
.
value
=
false
;
dataTransferRef
[
unref
(
uidRef
)]
=
null
;
dataTransferRef
[
unref
(
uidRef
)]
=
null
;
});
});
if
(
unref
(
loadedRef
)
&&
isProdMode
()
&&
modalMethod
===
unref
(
modalRef
))
{
if
(
unref
(
loadedRef
)
&&
isProdMode
()
&&
modalMethod
===
unref
(
modalRef
))
return
;
return
;
}
modalRef
.
value
=
modalMethod
;
modalRef
.
value
=
modalMethod
;
}
}
const
getInstance
=
()
=>
{
const
getInstance
=
()
=>
{
...
@@ -44,11 +44,13 @@ export function useModal(): UseModalReturnType {
...
@@ -44,11 +44,13 @@ export function useModal(): UseModalReturnType {
setModalProps
:
(
props
:
Partial
<
ModalProps
>
):
void
=>
{
setModalProps
:
(
props
:
Partial
<
ModalProps
>
):
void
=>
{
getInstance
().
setModalProps
(
props
);
getInstance
().
setModalProps
(
props
);
},
},
openModal
:
(
visible
=
true
):
void
=>
{
openModal
:
(
visible
=
true
):
void
=>
{
getInstance
().
setModalProps
({
getInstance
().
setModalProps
({
visible
:
visible
,
visible
:
visible
,
});
});
},
},
transferModalData
(
val
:
any
)
{
transferModalData
(
val
:
any
)
{
dataTransferRef
[
unref
(
uidRef
)]
=
val
;
dataTransferRef
[
unref
(
uidRef
)]
=
val
;
},
},
...
@@ -64,6 +66,7 @@ export const useModalInner = (): UseModalInnerReturnType => {
...
@@ -64,6 +66,7 @@ export const useModalInner = (): UseModalInnerReturnType => {
if
(
!
currentInstall
)
{
if
(
!
currentInstall
)
{
throw
new
Error
(
'
instance is undefined!
'
);
throw
new
Error
(
'
instance is undefined!
'
);
}
}
const
getInstance
=
()
=>
{
const
getInstance
=
()
=>
{
const
instance
=
unref
(
modalInstanceRef
);
const
instance
=
unref
(
modalInstanceRef
);
if
(
!
instance
)
{
if
(
!
instance
)
{
...
@@ -71,26 +74,32 @@ export const useModalInner = (): UseModalInnerReturnType => {
...
@@ -71,26 +74,32 @@ export const useModalInner = (): UseModalInnerReturnType => {
}
}
return
instance
;
return
instance
;
};
};
const
register
=
(
modalInstance
:
ModalMethods
,
uuid
:
string
)
=>
{
const
register
=
(
modalInstance
:
ModalMethods
,
uuid
:
string
)
=>
{
uidRef
.
value
=
uuid
;
uidRef
.
value
=
uuid
;
modalInstanceRef
.
value
=
modalInstance
;
modalInstanceRef
.
value
=
modalInstance
;
currentInstall
.
emit
(
'
register
'
,
modalInstance
);
currentInstall
.
emit
(
'
register
'
,
modalInstance
);
};
};
return
[
return
[
register
,
register
,
{
{
receiveModalDataRef
:
computed
(()
=>
{
receiveModalDataRef
:
computed
(()
=>
{
return
dataTransferRef
[
unref
(
uidRef
)];
return
dataTransferRef
[
unref
(
uidRef
)];
}),
}),
changeLoading
:
(
loading
=
true
)
=>
{
changeLoading
:
(
loading
=
true
)
=>
{
getInstance
().
setModalProps
({
loading
});
getInstance
().
setModalProps
({
loading
});
},
},
changeOkLoading
:
(
loading
=
true
)
=>
{
changeOkLoading
:
(
loading
=
true
)
=>
{
getInstance
().
setModalProps
({
confirmLoading
:
loading
});
getInstance
().
setModalProps
({
confirmLoading
:
loading
});
},
},
closeModal
:
()
=>
{
closeModal
:
()
=>
{
getInstance
().
setModalProps
({
visible
:
false
});
getInstance
().
setModalProps
({
visible
:
false
});
},
},
setModalProps
:
(
props
:
Partial
<
ModalProps
>
)
=>
{
setModalProps
:
(
props
:
Partial
<
ModalProps
>
)
=>
{
getInstance
().
setModalProps
(
props
);
getInstance
().
setModalProps
(
props
);
},
},
...
...
src/components/registerGlobComp.ts
浏览文件 @
fb0c7763
import
Icon
from
'
./Icon/index
'
;
import
Icon
from
'
./Icon/index
'
;
import
{
BasicHelp
,
BasicTitle
}
from
'
./Basic
'
;
import
Button
from
'
./Button/index.vue
'
;
import
Button
from
'
./Button/index.vue
'
;
import
{
Button
as
AntButton
}
from
'
ant-design-vue
'
;
import
{
Button
as
AntButton
}
from
'
ant-design-vue
'
;
import
{
getApp
}
from
'
/@/useApp
'
;
import
{
getApp
}
from
'
/@/useApp
'
;
const
compList
=
[
Icon
,
B
asicHelp
,
BasicTitle
,
B
utton
,
AntButton
.
Group
];
const
compList
=
[
Icon
,
Button
,
AntButton
.
Group
];
// Fix hmr multiple registered components
// Fix hmr multiple registered components
let
registered
=
false
;
let
registered
=
false
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录