[项目篇]vue3+ts 封装底部tabbar - 第三天

<template>
  <van-tabbar v-model="active" fixed route active-color=”#6689e2“>
    <van-tabbar-item v-for="(item, index) in tabbars" :to="item.to" :key="index">
        <span>{{ item.title }}</span>
        <template #icon="props">
            <img :src.sync="props.active ? item.image_active : item.image" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
复制代码

<script lang="ts">
import { defineComponent, PropType, ref } from "vue"
// ts 定义类型并且暴露出去
export interface ITabList {
  title: string          // 标题
  to: { name: string }   // url路径
  image: string          // 初始图标
  image_active: string   // 选中图标
}
export default defineComponent({
  name: "TabBar",
  props: {
    defaultActive: {
      type: Number,
      default: 0
    },
    tabbars: {
      type: Array as PropType<ITabList[]>, // 类型断言
      default: () => {
        return []
      }
    }
  },
  setup(props) {
    const active = ref(props.defaultActive)
    return { active }
  }
})
</script>
复制代码

<!-- layouts -->
<template>
  <div class="app-container">
    <div class="layout-content">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
      <router-view v-else></router-view>
    </div>
    <div class="layout-footer" v-if="$route.meta.showTab">
      <!-- 这里@change默认绑定在了van-tabbar上，参考vue的$attr -->
      <TabBar
        :tabbars="tabbars"
        :defaultActive="defaultActive"
        @change="handleChange"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from "vue"
import TabBar, { ITabList } from "@/components/TabBar.vue"
import { useRoute } from "vue-router"
import indexPng from '@assets/tabbar/index.png'
import indexActivePng from '@assets/tabbar/index-active.png'
import etcPng from '@assets/tabbar/etc.png'
import etcActivePng from '@/assets/tabbar/etc-active.png'
import bbsPng from '@assets/tabbar/bbs.png'
import bbsActivePng from '@assets/tabbar/bbs-active.png'
import couponPng from '@assets/tabbar/coupon.png'
import couponActivePng from '@assets/tabbar/coupon-active.png'
import myPng from '@assets/tabbar/my.png'
import myActivePng from '@assets/tabbar/my-active.png'
interface ILayoutState {
  tabbars: Array<ITabList>
  defaultActive: number
}
export default defineComponent({
  name: "layouts",
  components: { TabBar },
  setup() {
    const route = useRoute();
    const state: ILayoutState = reactive({
      tabbars: [
        { title: "首页", to: { name: "Index" }, image: indexPng, image_active: indexActivePng },
        { title: "记账", to: { name: "Etc" },   image: etcPng,   image_active: etcActivePng },
        { title: "论坛", to: { name: "Todo" },  image: bbsPng,   image_active: bbsActivePng },
        { title: "优惠", to: { name: "Coupon" },image: couponPng,image_active: couponActivePng },
        { title: "我的", to: { name: "My" },    image: myPng,    image_active: myActivePng }
      ],
      defaultActive: computed(() => {
        return state.tabbars.findIndex((item: ITabList) => {
          return item.to.name === route.name
        })
      })
    })
    const handleChange = (v: number) => {
      console.log("tab value:", v)
    }
    return {
      ...toRefs(state),
      handleChange
    }
  }
});
</script>
复制代码

import { RouteRecordRaw } from "vue-router";
export const constantRouterMap: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "/",
    component: () => import("@/views/layout.vue"),
    redirect: "/Index",
    meta: { title: "首页", keepAlive: false },
    children: [
      { path: "/index", name: "Index", component: () => import("@/views/tabbar/index.vue"), meta: { title: "首页", keepAlive: false, showTab: true } },
      { path: "/etc", name: "Etc", component: () => import("@/views/tabbar/etc.vue"), meta: { title: "记账", keepAlive: false, showTab: true } },
      { path: "/todo", name: "Todo", component: () => import("@/views/tabbar/todo.vue"), meta: { title: "论坛", keepAlive: false, showTab: true } },
      { path: "/coupon", name: "Coupon", component: () => import("@/views/tabbar/coupon.vue"), meta: { title: "优惠", keepAlive: false, showTab: true } },
      { path: "/my", name: "My", component: () => import("@/views/tabbar/my.vue"), meta: { title: "我的", keepAlive: false, showTab: true } }
    ]
  }
]
复制代码