vue3设置左侧菜单和头部

夢☆Meng

已于 2024-03-31 14:07:19 修改

阅读量2k

点赞数 7

分类专栏： vue 文章标签：前端 vue.js

于 2024-03-31 14:06:43 首次发布

本文链接：https://blog.csdn.net/qq_51554230/article/details/137198370

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

文章描述了在Vue项目中创建文件，配置路由，实现登录验证，并详细介绍了Aside、Header和Main组件的使用，以及el-组件如el-container、el-aside等的布局结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layout/Aside/index.vue

layout/Header/index.vue

layout/Main/index.vue

src/views/Home/index.vue

未完善，有待改进

页面展示

创建文件

在src/layout包下，创建Aside、Header、Main文件夹和index.vue文件

引入layou/index.vue

在router包下index.vue 文件中引入layou/index.vue

import Home from '../layout/index.vue'


// 配置首页路由
  {
    path: '/home', // 添加register路由规则
    name: 'home',
    component: Home
  },

添加按钮

在Login页面中，进行设置，进行验证后再跳转。

<el-form-item>
                <!-- 按钮 -->
                <!-- <el-button style="width: 100%;" type="primary" >登陆</el-button> -->
                <el-button style="width: 100%;" type="primary" @click="handleLogin">登陆</el-button>
            </el-form-item>




<script lang="ts" setup>

// 处理登录按钮点击事件
    const handleLogin = () => {
    if (loginForm.value.account === 'admin' && loginForm.value.password === 'admin') {
        // 登录成功
        
        router.push('/home');
    } else {
        console.log('账号或密码错误，请重新输入');
        console.log('account:' + loginForm.value.account);
        console.log('password:' + loginForm.value.password);
        // 刷新页面
        // window.location.reload();
    }
};

</script>

layout/index.vue

主文件，在这里调用Aside、Header、Main.

<template>
  <div class="common-layout">
  <el-container class="zhongtiframe">
    <el-aside class="aside" :style="{ height: height + 'px',minHeight: minHeight + 'px' }">
      <Aside/>
    </el-aside>
    <el-container>
      <el-header>
          <Header/>
      </el-header>
      <el-main>
          <Main/>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script setup>
  // 导入左侧导航组件
  import Aside from './Aside/index.vue'
  import Header from './Header/index.vue'
  import Main from './Main/index.vue'
  import { ref,onMounted } from 'vue';
  const height = ref(0)
  const minHeight = ref(0)

  onMounted(() => {
      getHeight();
      // 监听页面缩放事件
      minHeight.value = document.documentElement.clientHeight;
      window.addEventListener('resize',getHeight)
  })
  // 获取文档高度
  function getHeight() {
      height.value = document.documentElement.clientHeight ;
  }
</script>

<style lang="scss" scoped>

// 设置Aside部分页面的颜色
.aside {
  background-color: #9dc8fb;
}
.el-header {
    --el-header-padding: 1 20px;
    --el-header-height: 60px;
    box-sizing: border-box;
    flex-shrink: 0;
    height: var(--el-header-height);
    padding: var(--el-header-padding);
}

</style>

layout/Aside/index.vue

<template>
  <div class="Aside_title">
    海洋笔记
  </div>

    <el-radio-group v-model="isCollapse"  >

    <svg class="icon"  v-if="isCollapse" @click="toggleCollapse" >
    <use xlink:href="#icon-Shankar" />
  </svg>
  <svg class="icon"  v-else @click="toggleCollapse" >
    <use xlink:href="#icon-xiangzuo1" />
  </svg>
    
    </el-radio-group>
    <hr class="horizontal-line">
    
    <!-- default-active="2" 表示默认激活的是下拉菜单中的第三个菜单项，因为菜单项的索引是从 0 开始计数的。 -->
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-sub-menu index="1">
        <template #title >
          <!-- 设置自定义图标 -->
          <svg class="icon1" >
            <use xlink:href="#icon-biji" />
          </svg>
          <span class="icon-wenzi">笔记管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">笔记列表</el-menu-item>
          <el-menu-item index="1-2">item two</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-sub-menu index="2">
        <template #title >
          <!-- 设置自定义图标 -->
          <svg class="icon1" >
            <use xlink:href="#icon-shoucang" />
          </svg>
          <span class="icon-wenzi">我的收藏</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">收藏夹1</el-menu-item>
          <el-menu-item index="1-2">收藏夹2</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      
      <el-sub-menu index="3">
        <template #title >
          <!-- 设置自定义图标 -->
          <svg class="icon1" >
            <use xlink:href="#icon-fenxiang" />
          </svg>
          <span class="icon-wenzi">分享与协作</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">分享管理</el-menu-item>
          <el-menu-item index="1-2">协作管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-sub-menu index="4">
        <template #title >
          <!-- 设置自定义图标 -->
          <svg class="icon1" >
            <use xlink:href="#icon-fenlei" />
          </svg>
          <span class="icon-wenzi">分类与标签管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">分类管理</el-menu-item>
          <el-menu-item index="1-2">标签管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-menu-item index="5">
        <svg class="icon1" >
            <use xlink:href="#icon-huishouzhan" />
          </svg>
        <template #title >
          <!-- 设置自定义图标 -->
          
          <span class="icon-wenzi">回收站</span>
        </template>
        
      </el-menu-item>

      <el-menu-item index="6" disabled>
        <svg class="icon1" >
            <use xlink:href="#icon-daikaifa" />
          </svg>
        <template #title >
          <!-- 设置自定义图标 -->
          
          <span class="icon-wenzi">待开发</span>
        </template>
        
      </el-menu-item>
      
    </el-menu>

    
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  
  const isCollapse = ref(true)
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

  </script>
  
  <style>

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 34vh;
    min-height: 394px;
    background-color: #9dc8fb;
    
  }
  .el-menu {
    box-sizing: border-box;
    list-style: none;
    background-color: #9dc8fb;
    border: 0;  /**设置边框为0 */
    
    position: relative;
}
.el-aside {
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: auto;
    width: var(--el-aside-width,214px);
}
/* 设置海洋笔记 */
  .Aside_title{
    font-size: 40px;
    height: 100px; /* 设置容器的高度 */
    line-height: 100px; /* 设置行高等于容器高度 */
    text-align: center; /* 水平居中 */
    color: white;
  }


  /* 对展开和缩小图标进行设置 */
.icon{
  height: 20px;
  width: 20px;
  fill: #ffffff; /* 设置图标颜色为白色 */
  cursor: pointer; /* 当鼠标移动到图标上时显示小手样式 */
}
.icon1{
  height: 20px;
  width: 20px;
  text-align: left;
  /* margin-right: 10px; */
}
.icon-wenzi {
    vertical-align: bottom;
    margin-left: 10px;
}


/* 对横线的设置 */
.horizontal-line {
  border-top: 1px solid rgb(240, 232, 232); /* 设置颜色和宽度 */
  margin: 0 0; /* 设置上下边距 */
}


.el-sub-menu__title{
    padding: 0px;
    display: flex;
    justify-content: center;
}

.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item, .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item-group__title, .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
    /* padding-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level)*var(--el-menu-level-padding)); */
    white-space: nowrap;
    /* text-align: left; */
    float: left;
    margin-left: 10px;
}


  </style>

layout/Header/index.vue

<template>
  <div class="header_container">
    <!-- 面包屑 -->
    <div  class="header_left">
      面包屑
    </div>

    <!-- 头像和用户名 -->
    <div class="header_right">
      <div class="header_avatar">
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
      </div>
      <!-- 用户名 -->
      <div >
        <!-- 下拉菜单 -->
      <el-dropdown @command="handleCommand" class="header_headPortrait">
      <span class="el-dropdown-link">
        admin<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="a">个人信息</el-dropdown-item>
            <el-dropdown-item command="b">退出</el-dropdown-item>
            <el-dropdown-item command="c">Action 3</el-dropdown-item>
            <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
            <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
    </el-dropdown>
      </div>
        

    
  </div>
</div>
<hr/>
  </template>
  
  <script lang="ts" setup>

import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'

const handleCommand = (command: string | number | object) => {
  ElMessage(`click on item ${command}`)
}
  

  </script>
  
  <style  lang="scss" scoped>

.header_headPortrait{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.header_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
.header_right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        .header_avatar {
            cursor: pointer;
            margin-right: 12px;
            /* .avatar_img {
                width: 30px;
                height: 30px;
            } */
        }
        .el-dropdown-link {
            cursor: pointer;
            display: flex;
            align-items: center;
            border: none;
            outline: none; 
        }
    }
}
  
  
  </style>

layout/Main/index.vue

<template>
  <el-tabs
    type="card"
    closable
    class="demo-tabs"
  >
    <Hello/>
    
  </el-tabs>
  
</template>

<script setup>
import Hello from '@/views/Home/index.vue'
    
</script>

<style lang="scss" scoped>

</style>

src/views/Home/index.vue

<template>
    <div>
            这是我的首页
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>