feat(Tabbar): add placeholder prop (#5979)

src/tabbar/index.js

@@ -10,6 +10,7 @@ export default createComponent({
   props: {
     route: Boolean,
     zIndex: [Number, String],
+    placeholder: Boolean,
     activeColor: String,
     inactiveColor: String,
     value: {
@@ -30,6 +31,12 @@ export default createComponent({
     },
   },
 
+  data() {
+    return {
+      height: null,
+    };
+  },
+
   computed: {
     fit() {
       if (this.safeAreaInsetBottom !== null) {
@@ -45,6 +52,12 @@ export default createComponent({
     children: 'setActiveItem',
   },
 
+  mounted() {
+    if (this.placeholder && this.fixed) {
+      this.height = this.$refs.tabbar.getBoundingClientRect().height;
+    }
+  },
+
   methods: {
     setActiveItem() {
       this.children.forEach((item, index) => {
@@ -58,22 +71,35 @@ export default createComponent({
         this.$emit('change', active);
       }
     },
+
+    genTabbar() {
+      return (
+        <div
+          ref="tabbar"
+          style={{ zIndex: this.zIndex }}
+          class={[
+            { [BORDER_TOP_BOTTOM]: this.border },
+            bem({
+              unfit: !this.fit,
+              fixed: this.fixed,
+            }),
+          ]}
+        >
+          {this.slots()}
+        </div>
+      );
+    },
   },
 
   render() {
-    return (
-      <div
-        style={{ zIndex: this.zIndex }}
-        class={[
-          { [BORDER_TOP_BOTTOM]: this.border },
-          bem({
-            unfit: !this.fit,
-            fixed: this.fixed,
-          }),
-        ]}
-      >
-        {this.slots()}
-      </div>
-    );
+    if (this.placeholder && this.fixed) {
+      return (
+        <div class={bem('placeholder')} style={{ height: `${this.height}px` }}>
+          {this.genTabbar()}
+        </div>
+      );
+    }
+
+    return this.genTabbar();
   },
 });