feat: add usePlaceholder

src/composition/use-placeholder.js

@@ -0,0 +1,14 @@
+import { useHeight } from './use-rect';
+
+export function usePlaceholder(contentRef, bem) {
+  const height = useHeight(contentRef);
+
+  return (renderContent) => (
+    <div
+      class={bem('placeholder')}
+      style={{ height: height.value ? `${height.value}px` : null }}
+    >
+      {renderContent()}
+    </div>
+  );
+}

src/nav-bar/index.js

@@ -5,7 +5,7 @@ import { createNamespace } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 
 // Composition
-import { useHeight } from '../composition/use-rect';
+import { usePlaceholder } from '../composition/use-placeholder';
 
 // Components
 import Icon from '../icon';
@@ -31,7 +31,7 @@ export default createComponent({
 
   setup(props, { emit, slots }) {
     const navBarRef = ref();
-    const height = useHeight(navBarRef);
+    const renderPlaceholder = usePlaceholder(navBarRef, bem);
 
     const onClickLeft = (event) => {
       emit('click-left', event);
@@ -85,14 +85,7 @@ export default createComponent({
 
     return () => {
       if (props.fixed && props.placeholder) {
-        return (
-          <div
-            class={bem('placeholder')}
-            style={{ height: height.value && `${height.value}px` }}
-          >
-            {renderNavBar()}
-          </div>
-        );
+        return renderPlaceholder(renderNavBar);
       }
       return renderNavBar();
     };

src/tabbar/index.js

@@ -2,7 +2,7 @@ import { ref, reactive, provide } from 'vue';
 import { createNamespace, isDef } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { callInterceptor } from '../utils/interceptor';
-import { useHeight } from '../composition/use-rect';
+import { usePlaceholder } from '../composition/use-placeholder';
 
 const [createComponent, bem] = createNamespace('tabbar');
 
@@ -38,8 +38,8 @@ export default createComponent({
 
   setup(props, { emit, slots }) {
     const tabbarRef = ref();
-    const height = useHeight(tabbarRef);
     const children = reactive([]);
+    const renderPlaceholder = usePlaceholder(tabbarRef, bem);
 
     const isUnfit = () => {
       if (isDef(props.safeAreaInsetBottom)) {
@@ -84,16 +84,8 @@ export default createComponent({
 
     return () => {
       if (props.fixed && props.placeholder) {
-        return (
-          <div
-            class={bem('placeholder')}
-            style={{ height: height.value ? `${height.value}px` : null }}
-          >
-            {renderTabbar()}
-          </div>
-        );
+        return renderPlaceholder(renderTabbar);
       }
-
       return renderTabbar();
     };
   },