yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(@vben-core/popup-ui): modal 响应式适配，支持视口自适应 (#7951)

pull/355/head^2
过冬 2026-05-25 13:27:17 +08:00 committed by GitHub
parent f813245827
commit acf289381e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/@core/ui-kit/popup-ui/src/modal/modal.vue
View File

@ -12,11 +12,7 @@ import {
watch, watch,
} from 'vue'; } from 'vue';
import { import { usePriorityValues, useSimpleLocale } from '@vben-core/composables';
useIsMobile,
usePriorityValues,
useSimpleLocale,
} from '@vben-core/composables';
import { Expand, Shrink } from '@vben-core/icons'; import { Expand, Shrink } from '@vben-core/icons';
import { import {
Dialog, Dialog,
@ -62,7 +58,6 @@ const id = useId();
provide('DISMISSABLE_MODAL_ID', id); provide('DISMISSABLE_MODAL_ID', id);
const { $t } = useSimpleLocale(); const { $t } = useSimpleLocale();
const { isMobile } = useIsMobile();
const state = props.modalApi?.useStore?.(); const state = props.modalApi?.useStore?.();
const { const {
@ -101,7 +96,7 @@ const {
zIndex, zIndex,
} = usePriorityValues(props, state); } = usePriorityValues(props, state);
const shouldFullscreen = computed(() => fullscreen.value || isMobile.value); const shouldFullscreen = computed(() => fullscreen.value);
const shouldDraggable = computed( const shouldDraggable = computed(
() => draggable.value && !shouldFullscreen.value && header.value, () => draggable.value && !shouldFullscreen.value && header.value,
@ -242,13 +237,15 @@ function handleClosed() {
:append-to="getAppendTo" :append-to="getAppendTo"
:class=" :class="
cn( cn(
'inset-x-0 top-[10vh] mx-auto flex max-h-[80%] w-130 flex-col p-0', 'inset-x-0 top-[10vh] mx-auto flex w-130 flex-col p-0',
shouldFullscreen ? 'sm:rounded-none' : 'sm:rounded-(--radius)', shouldFullscreen ? 'rounded-none' : 'rounded-(--radius)',
modalClass, modalClass,
{ {
'border border-border': bordered, 'border border-border': bordered,
'shadow-3xl': !bordered, 'shadow-3xl': !bordered,
'top-0 left-0 size-full max-h-full transform-[translate(0,0)]!': 'max-h-[min(80%,calc(100dvh-20px))] max-w-[calc(100vw-20px)]':
!shouldFullscreen,
'top-0 left-0 size-full max-h-full max-w-full transform-[translate(0,0)]!':
shouldFullscreen, shouldFullscreen,
'top-1/2': centered && !shouldFullscreen, 'top-1/2': centered && !shouldFullscreen,
'duration-300': !dragging, 'duration-300': !dragging,
@ -322,7 +319,7 @@ function handleClosed() {
<VbenLoading v-if="showLoading || submitting" spinning /> <VbenLoading v-if="showLoading || submitting" spinning />
<VbenIconButton <VbenIconButton
v-if="fullscreenButton" v-if="fullscreenButton"
class="absolute top-3 right-10 flex-center hidden size-6 rounded-full px-1 text-lg text-foreground/80 opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-hidden disabled:pointer-events-none sm:block" class="absolute top-3 right-10 flex-center size-6 rounded-full px-1 text-lg text-foreground/80 opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-hidden disabled:pointer-events-none"
@click="handleFullscreen" @click="handleFullscreen"
> >
<Shrink v-if="fullscreen" class="size-3.5" /> <Shrink v-if="fullscreen" class="size-3.5" />