移动端效果,弹窗默认统一全屏,实现更好的适配效果

pull/1164/head
JEECG 2024-03-26 22:15:03 +08:00
parent 09a1a497b9
commit 8540e8d2ae
1 changed files with 22 additions and 1 deletions

View File

@ -65,6 +65,9 @@
import { useFullScreen } from './hooks/useModalFullScreen'; import { useFullScreen } from './hooks/useModalFullScreen';
import { omit } from 'lodash-es'; import { omit } from 'lodash-es';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { useAppInject } from '/@/hooks/web/useAppInject';
export default defineComponent({ export default defineComponent({
name: 'BasicModal', name: 'BasicModal',
components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader }, components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader },
@ -94,13 +97,21 @@
if (instance) { if (instance) {
emit('register', modalMethods, instance.uid); emit('register', modalMethods, instance.uid);
} }
const { getIsMobile } = useAppInject();
// Custom title component: get title // Custom title component: get title
const getMergeProps = computed((): Recordable => { const getMergeProps = computed((): Recordable => {
return { const result = {
...props, ...props,
...(unref(propsRef) as any), ...(unref(propsRef) as any),
}; };
// update-begin--author:liaozhiyang---date:20240326---forQQYUN-8643
if (getIsMobile.value) {
result.canFullscreen = false;
result.defaultFullscreen = true;
}
// update-end--author:liaozhiyang---date:20240326---forQQYUN-8643
return result;
}); });
//update-begin-author:liusq date:2023-05-25 for:issues/4856Modal :title = null //update-begin-author:liusq date:2023-05-25 for:issues/4856Modal :title = null
// //
@ -153,6 +164,11 @@
watchEffect(() => { watchEffect(() => {
fullScreenRef.value = !!props.defaultFullscreen; fullScreenRef.value = !!props.defaultFullscreen;
// update-begin--author:liaozhiyang---date:20240326---forQQYUN-8643
if (getIsMobile.value) {
fullScreenRef.value = true
}
// update-end--author:liaozhiyang---date:20240326---forQQYUN-8643
}); });
watchEffect(() => { watchEffect(() => {
@ -295,4 +311,9 @@
.jeecg-modal-content { .jeecg-modal-content {
height: 100%; height: 100%;
} }
html[data-theme='dark'] {
.jeecg-comment-outer {
border-left: 1px solid rgba(253, 253, 253, 0.12);
}
}
</style> </style>