TabBar 标签栏

更新: 2024/10/24 字数: 0 字 时长: 0 分钟

说明

van-tabbar 组件的二次封装，底部导航栏，用于在不同页面之间进行切换，具体可参考 Vant。

基本使用

引入

App.vue文件中，组件已被自动注册，无需引入，详见unplugin-vue-components。

<template>
  <VanConfigProvider :theme="mode">
    <NavBar />
    <router-view v-slot="{ Component, route }">
      <transition :name="routeTransitionName">
        <keep-alive :include="keepAliveRouteNames">
          <component :is="Component" :key="route.name" />
        </keep-alive>
      </transition>
    </router-view>
    <TabBar />
    <ReDialog />
  </VanConfigProvider>
</template>

通过名称匹配

icon用的是iconify里的图标，可参考图标库，若用图片可选择active和inactive。

<TabBar v-model="activeName" :routes="routes" />

import { ref } from "vue";

const activeName = ref(0);
const routes = ref([
  {
    title: "layouts.home",
    name: "home",
    icon: "i-carbon:home",
  },
  {
    title: "layouts.profile",
    name: "profile",
    icon: "i-carbon:user",
  },
]);

路由模式

需开启路由模式，页面跳转时to匹配路由里的路径

<TabBar :routes="routes" is-route />

import { ref } from "vue";

const routes = ref([
  {
    title: "layouts.home",
    name: "home",
    icon: "i-carbon:home",
    to: "/",
  },
  {
    title: "layouts.profile",
    name: "profile",
    icon: "i-carbon:user",
    to: "/profile",
  },
]);

API

传参配置

参数	说明	类型	默认值
v-model	当前选中标签的名称，需配合route里的name使用	string	-
routes	路由对象，具体类型见下表	Array<routeType>	-
isRoute	是否使用路由跳转，若开启，选中标签配置将不生效	boolean	true
isReplace	是否在跳转时替换当前页面历史	boolean	false
isFixed	是否固定底部导航栏	boolean	true
inActiveColor	未选中标签颜色	string	#7d7e80
activeColor	选中标签颜色	string	#1989fa
isBorder	是否显示外边框	boolean	true

routes详解

参数	说明	类型
title	标签名称	string
name	标签的标识	string
icon	图标名称，配置后active和inactive不生效	string
to	点击后跳转的目标路由对象，等同于 Vue Router 的 to 属性	string|object
url	点击后跳转的目标链接地址	string
active	选中时的图片链接	string
inactive	未选中时的图片链接	string
dot	是否显示小红点	boolean
badge	图标右上角徽标的内容	number|string
badgeProps	自定义徽标组件的参数，传入的对象会透传给Badge 组件的 props	BadgeProps

类型声明

interface routeType {
  title: string;
  name?: string;
  icon: string;
  to?: string;
  url?: string;
  active?: string;
  inactive?: string;
  dot?: boolean;
  badge?: number | string;
  badgeProps?: object;
}