从初识到精通：Vue3+TS封装底部Tabbar技术探索

2023-10-05 02:15:32

引言

在现代Web开发领域，Tabbar已成为移动和桌面应用程序中必不可少的导航元素。它允许用户在不同页面之间无缝切换，增强了用户体验。在本文中，我们将深入探讨如何使用Vue3和TypeScript封装一个自定义底部Tabbar组件，从基础概念到高级技术，提供一个全面的指南。

骨架搭建

首先，我们使用Vue3创建一个骨架组件。这涉及创建 <TabBar> 组件并定义其HTML结构：

<template>
  <nav class="tabbar">
    <ul>
      <li v-for="item in tabs" :key="item.name" @click="setActiveTab(item)">
        <a :class="{ 'active': item.name === activeTab }">
          <i :class="item.icon"></i>
          <span>{{ item.label }}</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

此结构创建了一个具有多个选项卡项的导航栏。每个选项卡项包含一个图标、一个标签和一个点击事件，用于在选项卡之间切换。

JS实现

接下来，我们在 TabBar.vue 中编写JS逻辑：

import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    tabs: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const activeTab = ref(props.tabs[0].name);

    const setActiveTab = (tab) => {
      activeTab.value = tab.name;
      // ...执行其他逻辑...
    };

    return {
      activeTab,
      setActiveTab,
    };
  },
});

此代码定义了一个可重用的组件，它接受一个 tabs 属性，其中包含所有选项卡项的数据。setActiveTab 方法用于在选项卡之间切换，并更新 activeTab ref以反映当前活动选项卡。

样式定制

为了给Tabbar添加视觉吸引力，我们需要添加一些样式。在 style.css 中添加以下代码：

.tabbar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  height: 56px;
}

.tabbar ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tabbar li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 56px;
}

.tabbar a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #666;
  text-decoration: none;
}

.tabbar a.active {
  background-color: #007bff;
  color: #fff;
}

.tabbar a i {
  margin-right: 5px;
  font-size: 24px;
}

.tabbar a span {
  font-size: 14px;
}