前端：第七章-布局与导航组件

news2026/3/17 5:10:15

第七章：布局与导航组件🎯本章目标：开发应用主布局组件、顶部导航栏和侧边导航菜单。7.1 布局结构设计7.1.1 布局结构图┌─────────────────────────────────────────────────────────┐ │ Navbar（顶部导航） │ ├─────────┬───────────────────────────────────────────────┤ │ │ │ │ │ │ │ Sidebar │ Main Content │ │ （侧边栏）│ （主内容区） │ │ │ │ │ │ │ └─────────┴───────────────────────────────────────────────┘7.1.2 组件文件结构src/components/layout/ ├── MainLayout.vue # 主布局组件 ├── Navbar.vue # 顶部导航栏 └── Sidebar.vue # 侧边导航菜单7.2 创建主布局组件7.2.1 创建 MainLayout.vue创建src/components/layout/MainLayout.vue：template el-container !-- 侧边栏 -- el-aside :width="appStore.sidebarCollapsed ? '64px' : '260px'" Sidebar / /el-aside !-- 主内容区 -- el-container !-- 顶部导航栏 -- el-header Navbar / /el-header !-- 内容区域 -- el-main div router-view v-slot="{ Component }" transition mode="out-in" component :is="Component" / /transition /router-view /div /el-main /el-container !-- 返回顶部按钮 -- transition el-tooltip content="返回顶部" placement="left" :show-after="300" button v-show="showBackToTop" @click="scrollToTop" el-iconTop //el-icon /button /el-tooltip /transition /el-container /template script setup lang="ts" import { ref, onMounted, onUnmounted } from 'vue' import { Top } from '@element-plus/icons-vue' import { useAppStore } from '@/stores/app' import Navbar from './Navbar.vue' import Sidebar from './Sidebar.vue' const appStore = useAppStore() const showBackToTop = ref(false) let scrollContainer: HTMLElement | null = null // 监听滚动 function handleScroll() { if (!scrollContainer) return showBackToTop.value = scrollContainer.scrollTop 100 } // 返回顶部 function scrollToTop() { if (scrollContainer) { scrollContainer.scrollTo({ top: 0, behavior: 'smooth' }) } } onMounted(() = { setTimeout(() = { scrollContainer = document.getElementById('scroll-container') if (scrollContainer) { scrollContainer.addEventListener('scroll', handleScroll, { passive: true }) } }, 100) }) onUnmounted(() = { if (scrollContainer) { scrollContainer.removeEventListener('scroll', handleScroll) } }) /script style scoped .main-layout { @apply h-screen overflow-hidden; } .sidebar-container { @apply bg-slate-900 transition-all duration-300 overflow-hidden; } html.dark .sidebar-container { @apply bg-slate-950; } .main-container { @apply flex-col bg-gray-50; } html.dark .main-container { @apply bg-slate-900; } .header-container { @apply bg-white border-b border-gray-200 px-0 flex items-center; @apply shadow-sm; } html.dark .header-container { @apply bg-slate-800 border-slate-700; } .content-container { @apply overflow-auto p-0; } .content-wrapper { @apply p-

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2418333.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！