designer-hub/src/components/tabbar-evo.vue

<script lang="ts" setup>
import { currRoute, getIsTabbar } from '@/utils'
import { onMounted, ref } from 'vue'
const props = defineProps({
  items: {
    type: Array as PropType<
      {
        title: string
        icon?: string
        iconPath: string
        selectedIconPath: string
        path: string
        hiddenTitle?: boolean
      }[]
    >,
    default: () => [],
  },
  currentPath: {
    type: String,
    default: '',
  },
  fixed: {
    type: Boolean,
    default: false,
  },
  safeAreaInsetBottom: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits<{ click: [path: string] }>()
const safeAreaInsets = ref({ bottom: 0 })
const tabbar = ref<HTMLElement | undefined>()

const handleClick = (path: string) => {
  // uni.switchTab({ url: path })
  emits('click', path)
}

onMounted(async () => {
  if (props.safeAreaInsetBottom) {
    // uniapp 获取safeAreaInsetBottom
    const res = await uni.getSystemInfoSync()
    safeAreaInsets.value = res.safeAreaInsets
    // 获取到tabbar的dom计算过的margin
    if (tabbar.value) {
      tabbar.value.style.marginBottom = `${safeAreaInsets.value.bottom + 14}px`
    }
  }
})
</script>
<template>
  <div>
    <!-- <wd-tabbar fixed shape="round" safeAreaInsetBottom>
      <template v-for="it of items" :key="it.id">
        <wd-tabbar-item :title="it.title" :icon="it.icon">
          <template #icon v-if="it.iconPath">
            <wd-img round height="40rpx" width="40rpx" :src="it.iconPath"></wd-img>
          </template>
        </wd-tabbar-item>
      </template>
    </wd-tabbar> -->
    <div>
      <div
        ref="tabbar"
        :class="[fixed ? 'fixed bottom-0 left-0 right-0' : '']"
        class="m-3.5 h-[60px] bg-white/70 rounded-[60px] border border-white backdrop-blur-[25px] flex items-center justify-around"
      >
        <template
          v-for="({ iconPath, selectedIconPath, title, hiddenTitle, path }, i) in items"
          :key="i"
        >
          <div class="flex flex-col items-center justify-center" @click="handleClick(path)">
            <wd-img
              round
              :height="hiddenTitle ? 40 : 22"
              :width="hiddenTitle ? 40 : 22"
              :src="currentPath === path ? selectedIconPath : iconPath"
            ></wd-img>
            <span
              class="mt-1 text-center text-[10px] font-normal font-['PingFang SC'] leading-none"
              :class="[currentPath === path ? 'text-black' : 'text-[#8c8c8c]']"
              v-if="!hiddenTitle"
            >
              {{ title }}
            </span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>