designer-hub/packages/app/src/components/bottom-app-bar.vue

<script setup lang="ts">
import { getRect, addUnit } from 'wot-design-uni/components/common/util'

const props = defineProps<{
  'safe-area-inset-bottom'?: boolean
  fixed?: boolean
  placeholder?: boolean
  border?: boolean
  transparent?: boolean
}>()

const { proxy } = getCurrentInstance() as any
const aRef = ref<HTMLElement>()
const height = ref(0)
const safeAreaInsets = ref()
const setPlaceholderHeight = () => {
  if (!props.fixed || !props.placeholder) {
    return
  }

  getRect('.bottom-app-bar', false, proxy).then((res) => {
    height.value = res.height as number
  })
}
onMounted(async () => {
  uni.getSystemInfo({})
  const res = await uni.getWindowInfo()
  safeAreaInsets.value = res.safeAreaInsets
  if (props.fixed && props.placeholder) {
    nextTick(() => {
      setPlaceholderHeight()
    })
  }
})
</script>
<template>
  <div :style="{ height: addUnit(height) }">
    <div
      class="bottom-app-bar"
      ref="aRef"
      :class="[
        (fixed ?? true)
          ? 'fixed bottom-0 left-0 right-0 after:content-empty after:w-full after:h-full after:relative'
          : '',
        border ? 'border-t border-t-solid border-[#ececec]' : '',
      ]"
    >
      <div class="px-3.5 py-2.5" :class="[transparent ? '' : 'bg-white']">
        <div class=""><slot></slot></div>
      </div>
      <div
        class=""
        :class="[transparent ? '' : 'bg-white']"
        :style="{ height: `${safeAreaInsets?.bottom}rpx` }"
      ></div>
    </div>
  </div>
</template>