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() {
-
-
-
-
+
+
+
+
+
+