feat(bottom-navigation): add placeholder prop

packages/varlet-ui/src/bottom-navigation/BottomNavigation.vue

@@ -12,6 +12,7 @@
     "
     ref="bottomNavigationDom"
     :style="`z-index:${zIndex}`"
+    v-bind="$attrs"
   >
     <slot />
 
@@ -21,10 +22,13 @@
       var-bottom-navigation__fab
       @click="handleFabClick"
       v-bind="fabProps"
+      id="var-bottom-navigation__fab"
     >
       <slot name="fab"></slot>
     </var-button>
   </div>
+
+  <div v-if="fixed && placeholder" :class="n('--placeholder')" :style="{ height: placeholderHeight }" />
 </template>
 
 <script lang="ts">
@@ -33,7 +37,7 @@ import { defineComponent, ref, computed, onUpdated, watch } from 'vue'
 import { props } from './props'
 import { useBottomNavigationItems, type BottomNavigationProvider } from './provide'
 import { createNamespace } from '../utils/components'
-import { isNumber, normalizeToArray, call } from '@varlet/shared'
+import { isNumber, normalizeToArray, call, getRect } from '@varlet/shared'
 import { onSmartMounted } from '@varlet/use'
 import { type BottomNavigationItemProvider } from '../bottom-navigation-item/provide'
 
@@ -57,6 +61,7 @@ export default defineComponent({
     const activeColor = computed<string | undefined>(() => props.activeColor)
     const inactiveColor = computed<string | undefined>(() => props.inactiveColor)
     const variant = computed<boolean | undefined>(() => props.variant)
+    const placeholderHeight = ref()
     const fabProps = ref({})
     const { length, bottomNavigationItems, bindBottomNavigationItem } = useBottomNavigationItems()
 
@@ -81,6 +86,8 @@ export default defineComponent({
     )
 
     onSmartMounted(() => {
+      setPlaceholderHeight()
+
       if (!slots.fab) {
         return
       }
@@ -190,10 +197,27 @@ export default defineComponent({
       call(props.onFabClick)
     }
 
+    function setPlaceholderHeight() {
+      if (!props.fixed || !props.placeholder) {
+        return
+      }
+
+      const bottomRect = getRect(bottomNavigationDom.value!)
+      let totalHeight = bottomRect.height
+
+      if (slots.fab) {
+        const fabRect = getRect(document.getElementById('var-bottom-navigation__fab')!)
+        totalHeight = bottomRect.top - fabRect.top + bottomRect.height
+      }
+
+      placeholderHeight.value = `${totalHeight}px`
+    }
+
     return {
       length,
       bottomNavigationDom,
       fabProps,
+      placeholderHeight,
       n,
       classes,
       handleFabClick,

packages/varlet-ui/src/bottom-navigation/__tests__/__snapshots__/index.spec.js.snap

@@ -15,7 +15,8 @@ exports[`test bottom-navigation component props > test variant mode 1`] = `
     <div class="var-bottom-navigation-item__icon-container"><i class="var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon" style="transition-duration: 0ms;" var-bottom-navigation-item-cover=""></i></div><span class="var-bottom-navigation-item__label">tag 4</span>
   </button>
   <!--v-if-->
-</div>"
+</div>
+<!--v-if-->"
 `;
 
 exports[`test bottom-navigation component props > test variant mode 2`] = `
@@ -33,5 +34,6 @@ exports[`test bottom-navigation component props > test variant mode 2`] = `
     <div class="var-bottom-navigation-item__icon-container var-bottom-navigation-item--variant-icon-container"><i class="var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon" style="transition-duration: 0ms;" var-bottom-navigation-item-cover=""></i></div><span class="var-bottom-navigation-item__label">tag 4</span>
   </button>
   <!--v-if-->
-</div>"
+</div>
+<!--v-if-->"
 `;

packages/varlet-ui/src/bottom-navigation/__tests__/index.spec.js

@@ -262,6 +262,23 @@ describe('test bottom-navigation component props', () => {
     wrapper.unmount()
   })
 
+  test('test bottom-navigation placeholder', async () => {
+    const wrapper = mount(VarBottomNavigation, {
+      props: {
+        placeholder: true,
+        fixed: true,
+      },
+    })
+
+    expect(wrapper.find('.var-bottom-navigation--placeholder').exists()).toBe(true)
+    await wrapper.setProps({ placeholder: false, fixed: false })
+    expect(wrapper.find('.var-bottom-navigation--placeholder').exists()).toBe(false)
+    await wrapper.setProps({ placeholder: true, fixed: false })
+    expect(wrapper.find('.var-bottom-navigation--placeholder').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
   test('test bottom-navigation fab-props', async () => {
     const wrapper = mount(Wrapper, {
       props: {

packages/varlet-ui/src/bottom-navigation/docs/en-US.md

@@ -201,6 +201,7 @@ const active = ref(0)
 | `z-index`       | Z-index                                             | _number \| string_ | `1` |
 | `active-color`  | Color of active tab item                            | _string_ | `-` |
 | `inactive-color` | Color of inactive tab item                          | _string_ | `-` |
+| `placeholder` ***3.2.10***  | Whether to generate placeholder elements of the same height at the bottom (`fixed` required)  | _boolean_ | `false` |
 | `fab-props`     | Fab button props                                    | _ButtonProps_ | `{ type: 'primary' }` |
 | `variant` ***3.2.0***      | Variant mode | _boolean_ | `false` |
 

packages/varlet-ui/src/bottom-navigation/docs/zh-CN.md

@@ -203,6 +203,7 @@ const active = ref(0)
 | `z-index`        | 元素 z-index      | _number \| string_ | `1` |
 | `active-color`   | 选中标签的颜色         | _string_ | `-` |
 | `inactive-color` | 未选中标签的颜色        | _string_ | `-` |
+| `placeholder`  ***3.2.10***   | 是否在底部生成相同高度的占位元素(需设置 `fixed`)  | _boolean_ | `false` |
 | `fab-props`      | 悬浮按钮属性          | _ButtonProps_ | `{ type: 'primary' }` |
 | `variant` ***3.2.0***      | 变体模式          | _boolean_ | `false` |
 

packages/varlet-ui/src/bottom-navigation/props.ts

@@ -17,6 +17,7 @@ export const props = {
   safeArea: Boolean,
   activeColor: String,
   inactiveColor: String,
+  placeholder: Boolean,
   fabProps: Object as PropType<ExtractPublicPropTypes<typeof buttonProps>>,
   onChange: defineListenerProp<(active: number | string) => void>(),
   onBeforeChange: defineListenerProp<(active: number | string) => any | Promise<any>>(),

packages/varlet-ui/types/bottomNavigation.d.ts

@@ -12,6 +12,7 @@ export interface BottomNavigationProps extends BasicAttributes {
   zIndex?: number | string
   activeColor?: string
   inactiveColor?: string
+  placeholder?: boolean
   fabProps?: Partial<ButtonProps>
   variant?: boolean
   onChange?: ListenerProp<(active: string | number) => void>