vue3.2/Vite/Ts29: 顶部 tabbar 组件静态搭建与拆分

<template>
  <div class="tabbar">
    <div class="tabbar_left">
      <Breadcrumb />
    </div>
    <div class="tabbar_right">
        <Setting />
    </div>
  </div>
</template>
<script setup lang="ts">
  import Breadcrumb from "./breadcrumb/index.vue";
  import Setting from "./setting/index.vue";
</script>

<template>
  <el-icon>
    <Expand />
  </el-icon>
  <!-- 面包屑 -->
  <el-breadcrumb separator="ArrowRight">
    <el-breadcrumb-item></el-breadcrumb-item>
    <el-breadcrumb-item></el-breadcrumb-item>
  </el-breadcrumb>
</template>

<template>
    <el-button type="primary" size="small" :icon="Refresh" circle></el-button>
    <el-button
    type="primary"
    size="small"
    :icon="FullScreen"
    circle
    ></el-button>
    <el-button type="primary" size="small" :icon="Setting" circle></el-button>
    <!-- 头像 -->
    <img src="../../../public/logo.png" />
    <!-- 退出登录 -->
    <el-dropdown>
        <span class="el-dropdown-link">
            admin
            <el-icon class="el-icon--right">
                <arrow-down>
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-item>退出登录</el-dropdown>
        </template>
    </el-dropdown>
</template>

<template>
  <div class="layout_container">
    <!-- ... -->
    <!-- 顶部导航 -->
    <div class="layout_tabbar">
      <Tabbar />
    </div>
    <!-- ... -->
  </div>
</template>
<script setup lang="ts">
  // ...
  import Tabbar from "./tabbar/index.vue";
  // ...
</script>