feat(ActionBar): add placeholder prop (#10724)

packages/vant/src/action-bar/ActionBar.tsx

@@ -1,12 +1,14 @@
-import { defineComponent, type ExtractPropTypes } from 'vue';
+import { defineComponent, ref, type ExtractPropTypes } from 'vue';
 import { truthProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
+import { usePlaceholder } from '../composables/use-placeholder';
 
 const [name, bem] = createNamespace('action-bar');
 
 export const ACTION_BAR_KEY = Symbol(name);
 
 const actionBarProps = {
+  placeholder: Boolean,
   safeAreaInsetBottom: truthProp,
 };
 
@@ -18,16 +20,26 @@ export default defineComponent({
   props: actionBarProps,
 
   setup(props, { slots }) {
+    const root = ref<HTMLElement>();
+    const renderPlaceholder = usePlaceholder(root, bem);
     const { linkChildren } = useChildren(ACTION_BAR_KEY);
 
     linkChildren();
 
-    return () => (
+    const renderActionBar = () => (
       <div
+        ref={root}
         class={[bem(), { 'van-safe-area-bottom': props.safeAreaInsetBottom }]}
       >
         {slots.default?.()}
       </div>
     );
+
+    return () => {
+      if (props.placeholder) {
+        return renderPlaceholder(renderActionBar);
+      }
+      return renderActionBar();
+    };
   },
 });

packages/vant/src/action-bar/README.md

@@ -90,6 +90,7 @@ Use `badge` prop to show badge in icon.
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
+| placeholder `v3.5.1` | Whether to generate a placeholder element | _boolean_ | `false` |
 
 ### ActionBarIcon Props
 

packages/vant/src/action-bar/README.zh-CN.md

@@ -94,6 +94,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
+| placeholder `v3.5.1` | 是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
 
 ### ActionBarIcon Props
 

packages/vant/src/action-bar/test/__snapshots__/index.spec.ts.snap

@@ -4,3 +4,12 @@ exports[`should allow to disable safe-area-inset-bottom prop 1`] = `
 <div class="van-action-bar">
 </div>
 `;
+
+exports[`should render placeholder element when using placeholder prop 1`] = `
+<div class="van-action-bar__placeholder"
+     style="height: 50px;"
+>
+  <div class="van-action-bar van-safe-area-bottom">
+  </div>
+</div>
+`;

packages/vant/src/action-bar/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { ActionBar } from '..';
-import { mount } from '../../../test';
+import { later, mockGetBoundingClientRect, mount } from '../../../test';
 
 test('should allow to disable safe-area-inset-bottom prop', () => {
   const wrapper = mount(ActionBar, {
@@ -10,3 +10,16 @@ test('should allow to disable safe-area-inset-bottom prop', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render placeholder element when using placeholder prop', async () => {
+  const restore = mockGetBoundingClientRect({ height: 50 });
+  const wrapper = mount(ActionBar, {
+    props: {
+      placeholder: true,
+    },
+  });
+
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+  restore();
+});