VberAdminPlus/UI/VAP.APP/src/components/tab-bar/tab-bar.vue

<script setup lang="ts">
import config from "@/core/config"
import type { TabBar } from "@/core/types"
import appStore from "@/stores"

const barList = computed(() => {
  const list = appStore.tabBarStore.getList()
  // console.log("LIST_BAR", list)
  return list
})
function changeActive(item: any) {
  appStore.tabBarStore.switchTab(item)
}
const currentTab = computed(() => {
  const name = appStore.tabBarStore.getCurrent()
  // console.log("NAME_BAR", name)
  return name
})
const getIconClass = (item: TabBar) => {
  let str = ""
  str += currentTab.value == item.name ? item.selectedIcon : item.icon
  return str
}
</script>
<template>
  <view
    v-if="config.dyTabBar"
    class="d-fcv w-100 bg-white border-top border-t-1 border-gray-4"
    style="position: fixed; bottom: 0; left: 0; right: 0"
  >
    <view
      class="d-fc flex-column w-100 pt-8 pb-10"
      :class="{ 'border-left border-l-1 border-gray-4': index > 0, 'border-r-1': index > 0 }"
      v-for="(item, index) in barList"
      :key="index"
      @click="changeActive(item)"
    >
      <i v-if="item.icon" class="fs-30" :class="getIconClass(item)"></i>
      <image
        v-else-if="item.iconPath"
        class="w-30px h-30px"
        :src="currentTab === item.name ? item.selectedIconPath : item.iconPath"
      ></image>
      <view class="fs-12 mt-2" :class="{ 'text-vb fs-13': currentTab === item.name }">{{ item.text }}</view>
    </view>
  </view>
</template>