feat(floating-panel): support header slot (#12897)

packages/vant/src/floating-panel/FloatingPanel.tsx

@@ -150,6 +150,18 @@ export default defineComponent({
     // useEventListener will set passive to `false` to eliminate the warning of Chrome
     useEventListener('touchmove', onTouchmove, { target: rootRef });
 
+    const renderHeader = () => {
+      if (slots.header) {
+        return slots.header();
+      }
+
+      return (
+        <div class={bem('header')}>
+          <div class={bem('header-bar')} />
+        </div>
+      );
+    };
+
     return () => (
       <div
         class={[bem(), { 'van-safe-area-bottom': props.safeAreaInsetBottom }]}
@@ -159,9 +171,7 @@ export default defineComponent({
         onTouchend={onTouchend}
         onTouchcancel={onTouchend}
       >
-        <div class={bem('header')}>
+        {renderHeader()}
-          <div class={bem('header-bar')} />
-        </div>
         <div class={bem('content')} ref={contentRef}>
           {slots.default?.()}
         </div>

packages/vant/src/floating-panel/README.md

@@ -102,6 +102,7 @@ By default, both the header and content areas of FloatingPanel can be dragged, b
 | Name    | Description          |
 | ------- | -------------------- |
 | default | Custom panel content |
+| header  | Custom panel header  |
 
 ### Types
 

packages/vant/src/floating-panel/README.zh-CN.md

@@ -102,6 +102,7 @@ export default {
 | Name    | Description    |
 | ------- | -------------- |
 | default | 自定义面板内容 |
+| header  | 自定义面板标头 |
 
 ### 类型定义
 

packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap

@@ -29,3 +29,14 @@ exports[`should minHeight 100 and maxHeight 0.6 innerHeight when anchors props d
   </div>
 </div>
 `;
+
+exports[`should render header slot correctly 1`] = `
+<div
+  class="van-floating-panel van-safe-area-bottom"
+  style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
+>
+  Custom Header
+  <div class="van-floating-panel__content">
+  </div>
+</div>
+`;

packages/vant/src/floating-panel/test/index.spec.tsx

@@ -116,3 +116,15 @@ test('should only drag header when allowDraggingContent is false', async () => {
   await later();
   expect(wrapper.emitted('change')).toBeTruthy();
 });
+
+test('should render header slot correctly', () => {
+  const wrapper = mount(FloatingPanel, {
+    slots: {
+      header: () => 'Custom Header',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+
+  wrapper.unmount();
+});