diff --git a/.changeset/gold-donkeys-modal-extra.md b/.changeset/gold-donkeys-modal-extra.md new file mode 100644 index 000000000..0b5b17dd0 --- /dev/null +++ b/.changeset/gold-donkeys-modal-extra.md @@ -0,0 +1,5 @@ +--- +'@vben-core/popup-ui': minor +--- + +feat(@vben-core/popup-ui): support custom content in modal header via extra slot diff --git a/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal.test.ts b/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal.test.ts index 20a95bc31..9c52bd549 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal.test.ts +++ b/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal.test.ts @@ -106,6 +106,43 @@ describe('vben modal', () => { document.dispatchEvent(new MouseEvent('mouseup')); }); + it('renders custom content in the extra header slot', async () => { + const mainContent = document.createElement('main'); + mainContent.id = ELEMENT_ID_MAIN_CONTENT; + mainContent.innerHTML = '
'; + document.body.append(mainContent); + + const Consumer = defineComponent(() => { + const [Modal, modalApi] = useVbenModal({ + appendToMain: true, + fullscreenButton: true, + title: 'Slot modal', + }); + onMounted(() => { + modalApi.open(); + }); + return () => + h(Modal, null, { + extra: () => h('span', { class: 'extra-slot-marker' }, 'Custom'), + }); + }); + const host = document.createElement('div'); + document.body.append(host); + activeApp = createApp(() => h(Consumer)); + activeApp.mount(host); + await nextTick(); + await nextTick(); + + const marker = document.querySelector('.extra-slot-marker'); + expect(marker).toBeInstanceOf(HTMLElement); + if (!(marker instanceof HTMLElement)) return; + expect(marker.textContent?.trim()).toBe('Custom'); + // extra slot 应渲染在 fullscreen 按钮容器内,与全屏按钮同排 + const container = marker.closest('.absolute'); + expect(container).toBeInstanceOf(HTMLElement); + expect(mainContent.contains(container)).toBe(true); + }); + it('fires onClosed via the fallback when no animation event arrives', async () => { vi.useFakeTimers({ toFake: [ diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue index 4a3e44537..ebfac5a90 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue +++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue @@ -319,14 +319,20 @@ function handleClosed() { - - - - + + + + + +