usky-web-pad/src/components/oa-tabbar/index.vue

<template>
  <u-tabbar :value="tabbarValue" @change="tabbarChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :border="true" :activeColor="proxy.$settingStore.themeColor.color">
    <u-tabbar-item :text="tab.text" v-for="(tab, index) in tabbarList" :key="index" :dot="tab.dot">
      <template #active-icon>
        <!-- <image style="width: 24px; height: 24px" :src="proxy.$settingStore.themeColor.tabList[index]"></image> -->
        <text class="iconfont font20" :class="tab.iconClass" :style="{ color: proxy.$settingStore.themeColor.color }"></text>
      </template>
      <template #inactive-icon>
        <!-- <image style="width: 24px; height: 24px" :src="tab.iconPath"></image> -->
        <text class="iconfont font20" :class="tab.iconClass" style="color: #7d7e80"></text>
      </template>
    </u-tabbar-item>
  </u-tabbar>
</template>
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, watchEffect, toRefs } from "vue";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const props = defineProps({
  //数据集
  tabbarList: {
    type: Object,
    default: [],
  },
  //选中值
  tabbarValue: {
    type: Number,
    default: 0,
  },
  //是否使用tabBar跳转页面
  isSwitchTab: {
    type: Boolean,
    default: true,
  },
});

const { tabbarValue, tabbarList, isSwitchTab } = toRefs(props);

function tabbarChange(e) {
  if (isSwitchTab.value) {
    console.log(tabbarList.value[e].pagePath)
    proxy.$tab.switchTab(tabbarList.value[e].pagePath);
  } else {
    proxy.$tab.redirectTo(tabbarList.value[e].pagePath);
  }
}

onLoad((option) => {});
</script>