gitee/snowy
1
0
Fork 0
mirror of https://gitee.com/xiaonuobase/snowy.git synced 2026-10-06 06:52:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

【底座】弹窗组件在抽屉下不显示title插槽内容问题修复

Browse Source
This commit is contained in:
俞宝山
2026-04-24 19:31:02 +08:00
parent 1d651f91e6
commit da0291a8f1
2 changed files with 85 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
snowy-admin-web/src/components/DragModal/index.vue
+36 -24
View File
@@ -5,10 +5,11 @@
:width="modalWidth"
:wrap-class-name="wrapClassName + fullscreenClass"
:bodyStyle="calcBodyStyle"
:closable="false"
@cancel="handleCancel"
>
<template #title>
<div class="flex justify-between items-center">
<div class="flex justify-between items-center -mr-9">
<div
ref="modalTitleRef"
:style="{
@@ -20,35 +21,46 @@
userSelect: 'none'
}"
>
<span class="cursor-default select-text">{{ title }}</span>
<span class="cursor-default select-text">
<slot name="title">{{ title }}</slot>
</span>
</div>
<div v-if="draggable && isDragged" class="ant-modal-action" @click="toggleResetDrag">
<a-tooltip title="还原拖拽" placement="bottom" :getPopupContainer="(trigger) => trigger">
<component :is="AimOutlined" class="p-0.5" />
</a-tooltip>
</div>
<div v-if="fullscreen" class="ant-modal-action" @click="toggleFullScreen">
<a-tooltip
:key="isFullscreen ? '' : 'fullscreen'"
:title="isFullscreen ? '退出全屏' : '全屏'"
placement="bottom"
:getPopupContainer="(trigger) => trigger"
>
<component :is="isFullscreen ? FullscreenExitOutlined : FullscreenOutlined" class="p-0.5" />
</a-tooltip>
<div class="flex items-center space-x-1 pr-2">
<div v-if="draggable && isDragged" class="ant-modal-action" @click="toggleResetDrag">
<a-tooltip title="还原拖拽" placement="bottom" :getPopupContainer="(trigger) => trigger">
<component :is="AimOutlined" class="p-0.5" />
</a-tooltip>
</div>
<div v-if="fullscreen" class="ant-modal-action" @click="toggleFullScreen">
<a-tooltip
:key="isFullscreen ? '' : 'fullscreen'"
:title="isFullscreen ? '退出全屏' : '全屏'"
placement="bottom"
:getPopupContainer="(trigger) => trigger"
>
<component :is="isFullscreen ? FullscreenExitOutlined : FullscreenOutlined" class="p-0.5" />
</a-tooltip>
</div>
<div class="ant-modal-action" @click="handleCancel">
<a-tooltip title="关闭" placement="bottom" :getPopupContainer="(trigger) => trigger">
<component :is="CloseOutlined" class="p-0.5" />
</a-tooltip>
</div>
</div>
</div>
</template>
<template #modalRender="{ originVNode }">
<div :style="transformStyle" class="relative">
<component ref="modalContentRef" :is="originVNode" />
<div
v-if="props.resizable && !isFullscreen"
class="absolute right-0.5 bottom-0.5 w-2 h-2 resize overflow-auto pointer-events-auto"
@mousedown="handleResize"
/>
</div>
<slot name="modalRender" :originVNode="originVNode">
<div :style="transformStyle" class="relative">
<component ref="modalContentRef" :is="originVNode" />
<div
v-if="props.resizable && !isFullscreen"
class="absolute right-0.5 bottom-0.5 w-2 h-2 resize overflow-auto pointer-events-auto"
@mousedown="handleResize"
/>
</div>
</slot>
</template>
<template #closeIcon>
snowy-admin-web/src/components/XnFormContainer/index.vue
+49 -31
View File
@@ -4,12 +4,13 @@
v-bind="$attrs"
:open="isOpen"
:width="modalWidth"
:footer="slotKeys.includes('footer') ? undefined : null"
:footer="slots.footer ? undefined : null"
:wrap-class-name="wrapClassName + fullscreenClass"
:closable="false"
@cancel="cancel"
>
<template #title>
<div class="flex justify-between items-center">
<template #title v-if="slots.title || title">
<div class="flex justify-between items-center -mr-9">
<div
ref="modalTitleRef"
:style="{
@@ -21,39 +22,44 @@
userSelect: 'none'
}"
>
<span class="cursor-default select-text">{{ title }}</span>
<span class="cursor-default select-text">
<slot name="title">{{ title }}</slot>
</span>
</div>
<div v-if="isDragged" class="ant-modal-action" @click="toggleResetDrag">
<a-tooltip title="还原拖拽" placement="bottom" :getPopupContainer="(trigger) => trigger">
<component :is="AimOutlined" class="p-0.5" />
</a-tooltip>
</div>
<div class="ant-modal-action" @click="toggleFullScreen">
<a-tooltip
:key="isFullscreen ? '' : 'isFullscreen'"
:title="isFullscreen ? '退出全屏' : '全屏'"
placement="bottom"
:getPopupContainer="(trigger) => trigger"
>
<component :is="isFullscreen ? FullscreenExitOutlined : FullscreenOutlined" class="p-0.5" />
</a-tooltip>
<div class="flex items-center space-x-1 pr-2">
<div v-if="isDragged" class="ant-modal-action" @click="toggleResetDrag">
<a-tooltip title="还原拖拽" placement="bottom" :getPopupContainer="(trigger) => trigger">
<component :is="AimOutlined" class="p-0.5" />
</a-tooltip>
</div>
<div class="ant-modal-action" @click="toggleFullScreen">
<a-tooltip
:key="isFullscreen ? '' : 'isFullscreen'"
:title="isFullscreen ? '退出全屏' : '全屏'"
placement="bottom"
:getPopupContainer="(trigger) => trigger"
>
<component :is="isFullscreen ? FullscreenExitOutlined : FullscreenOutlined" class="p-0.5" />
</a-tooltip>
</div>
<div class="ant-modal-action" @click="cancel">
<a-tooltip title="关闭" placement="bottom" :getPopupContainer="(trigger) => trigger">
<component :is="CloseOutlined" class="p-0.5" />
</a-tooltip>
</div>
</div>
</div>
</template>
<template #modalRender="{ originVNode }">
<div :style="transformStyle">
<component ref="modalContentRef" :is="originVNode" />
</div>
<slot name="modalRender" :originVNode="originVNode">
<div :style="transformStyle">
<component ref="modalContentRef" :is="originVNode" />
</div>
</slot>
</template>
<template #closeIcon>
<a-tooltip title="关闭" placement="bottom" :getPopupContainer="(trigger) => trigger">
<component :is="CloseOutlined" class="p-0.5" />
</a-tooltip>
</template>
<template v-for="slotKey in slotKeys" #[slotKey]>
<template v-for="slotKey in filteredSlotKeys" #[slotKey]>
<slot :name="slotKey" />
</template>
</a-modal>
@@ -61,19 +67,28 @@
v-else
v-bind="$attrs"
:open="isOpen"
:title="title"
:width="drawerWidth"
:footer-style="{ textAlign: 'right' }"
@close="cancel"
>
<template v-for="slotKey in slotKeys" #[slotKey]>
<template #title v-if="slots.title || title">
<slot name="title">{{ title }}</slot>
</template>
<template #closeIcon>
<slot name="closeIcon">
<a-tooltip title="关闭" placement="bottom" :getPopupContainer="(trigger) => trigger">
<component :is="CloseOutlined" class="p-0.5" />
</a-tooltip>
</slot>
</template>
<template v-for="slotKey in filteredSlotKeys" #[slotKey]>
<slot :name="slotKey" />
</template>
</a-drawer>
</template>
<script setup>
import { computed, nextTick, onMounted, onUnmounted, useSlots } from 'vue'
import { computed, nextTick, onMounted, onUnmounted, useSlots, ref, watch, watchEffect } from 'vue'
import { AimOutlined, CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue'
import { useDraggable } from '@vueuse/core'
import { globalStore } from '@/store'
@@ -113,6 +128,9 @@
const slotKeys = computed(() => {
return Object.keys(slots)
})
const filteredSlotKeys = computed(() => {
return slotKeys.value.filter((key) => !['title', 'modalRender', 'closeIcon'].includes(key))
})
const isModal = computed(() => {
return FormContainerTypeEnum.MODAL === formStyle.value
})