Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计

news2025/4/9 2:25:54

系列文档目录

Vue3+Vite+TypeScript安装

Element Plus安装与配置

主页设计与router配置

静态菜单设计

Pinia引入

文章目录

目录

系列文档目录

文章目录

前言

一、Aside设计

二、动态增加菜单

三.布局引用在Main中显示

参考文献：

前言

        在本系列文档中，将以一个实际的项目为例，逐步展示如何搭建菜单，设计主页布局，配置路由，实现静态和动态菜单等功能。

一、Aside设计

1.新建文件src\components\MainAsideCont.vue

完整代码如下：

// 主页左边的容器组件
<template>
 
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group>
        <template #title><span>Group One</span></template>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <template #title>Navigator Two</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <template #title>Navigator Three</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <template #title>Navigator Four</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

 
</script>

<style>
.el-menu{
  height: 100%; /* 设置整个布局的高度为 100%，确保布局占满整个视口 */
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

此处代码element plus官方代码，删除一些不需要部分，参考网址：http://element-plus.org/zh-CN/component/menu.html

2.调整Main.vue样式

只增加 style

<template>
    <div class="common-layout">
      <el-container>
        <el-aside >
          <MainAsideCont />       
        </el-aside>
        <el-container>
          <el-header>Header</el-header>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  <script lang="ts" setup>
  import { defineComponent } from 'vue';
  import MainAsideCont from '@/components/MainAsideCont.vue';


  </script>
  
  <style lang="less" scoped>
  .common-layout {
    height: 100%; /* 设置整个布局的高度为 100%，确保布局占满整个视口 */
    width: 100%; /* 设置整个布局的宽度为 100%，确保布局占满整个视口 */
    .el-container {
      height: 100%; /* 确保内部的 el-container 也占满整个父容器的高度 */
    }
    .el-header {
      background-color: #fff ; /* 设置表头的背景色为深黑色 */
      color: #141515; /* 设置表头文字颜色为白色，以便在深色背景上更清晰 */
      display: flex; /* 使用 flex 布局，方便对齐内容 */
      align-items: center; /* 垂直居中对齐内容 */
      justify-content: center; /* 水平居中对齐内容 */
      font-size: 18px; /* 设置文字大小为 18px */
      font-weight: bold; /* 设置文字为加粗 */
    }
    .el-aside {
      background-color:rgba(242, 242, 242, 0.19); /* 设置侧边栏的背景色为浅灰色 */
      color: #333; /* 设置侧边栏文字颜色为深灰色 */
      display: flex; /* 使用 flex 布局，方便对齐内容 */    
      align-items: center; /* 垂直居中对齐内容 */
      justify-content: center; /* 水平居中对齐内容 */
      font-size: 16px; /* 设置文字大小为 16px */
      font-weight: normal; /* 设置文字为正常粗细 */
      height: 100%; /* 确保侧边栏高度占满 */
      width: 200px;
    }
    .el-main {
      background-color: #fff; /* 设置主内容区域的背景色为白色 */
      color: #333; /* 设置主内容区域文字颜色为深灰色 */
      padding: 20px; /* 添加内边距，使内容不紧贴边缘 */
      font-size: 14px; /* 设置文字大小为 14px */
    }
  }
  </style>

3、运行效果

二、动态增加菜单

1.增加src\views\home.vue

<template>
<h1> Home</h1>
</template>

2.增加src\views\SysSettings\UserInfo.vue

<template>
<h1> 用户信息</h1>
</template>

3.增加src\views\SysSettings\AccountSetting.vue

<template>
<h1> 账户设定</h1>
</template>

4.调整路由router\index.ts

重点：children定义

完整代码

import { createRouter, createWebHistory } from 'vue-router';
import Main from '@/views/Main.vue'; //
import Home from '@/views/Home.vue'
import UserInfo from '@/views/SysSettings/UserInfo.vue'
import AccountSetting from '@/views/SysSettings/AccountSetting.vue'


const routes = [
  {
    path: '/',
    name: 'main',
    component: Main,
    children: [
      {
        path: 'home',
        name: 'home',
        component: Home,
      
      },
      {
        path: 'UserInfo',
        name: 'UserInfo',
        component: UserInfo,
        
      },
      {
        path: 'AccountSetting',
        name: 'AccountSetting',
        component:AccountSetting
      },
    ],
  },

 
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

5.调整Aside

路径：src\components\MainAsideCont.vue

通过数据自动增加菜单，为后期调用API产生菜单做好准备

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
  >
    <!-- 渲染没有子菜单的项 -->
    <el-menu-item
      v-for="item in noChilden"
      :key="item.index"
      :index="item.index"
      @click="handlemenu(item)"
    >
      <component class="icon" :is="item.icon"></component>
      <span>{{ item.label }}</span>
    </el-menu-item>

    <!-- 渲染有子菜单的项 -->
    <el-sub-menu
      v-for="item in hasChilden"
      :key="item.index"
      :index="item.index"
    >
      <template #title>
        <component class="icon" :is="item.icon"></component>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item
        v-for="subItem in item.children"
        :key="subItem.index"
        :index="subItem.index"
        @click="handlemenuchild(item, subItem)"
      >
        <span>{{ subItem.label }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {
  Document,
  Setting,
} from '@element-plus/icons-vue';

interface MenuItem {
  index: string;
  label: string;
  icon?: any;
  children?: MenuItem[];
}

const menuData = ref<MenuItem[]>([
  { index: 'Home', label: '首页', icon: Document },
  {
    index: 'SysSettings',
    label: '系统设置',
    icon: Setting,
    children: [
      { index: 'UserInfo', label: '个人资料' },
      { index: 'AccountSetting', label: '账户设置' },
    ],
  },
]);

const hasChilden = computed(() => menuData.value.filter(item => item.children && item.children.length > 0));
const noChilden = computed(() => menuData.value.filter(item => !item.children || item.children.length === 0));

const activeIndex = ref('Home');
const router = useRouter();

const handlemenu = (item: MenuItem) => {
  router.push(item.index);
};

const handlemenuchild = (item: MenuItem, subItem: MenuItem) => {  
  router.push(subItem.index);
};
</script>

<style>
.el-menu {
  height: 100%; /* 设置整个布局的高度为 100%，确保布局占满整个视口 */
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.icon {
  margin-right: 8px; /* 图标与文字之间的间距 */
  font-size: 18px;   /* 图标的大小 */
  width:18px;
  height:18px;
  size:8px;
  color: #606266;    /* 图标的默认颜色 */
  vertical-align: middle; /* 垂直居中对齐 */
}

/* 鼠标悬停时的样式 */
.icon:hover {
  color: #409eff; /* 鼠标悬停时图标的颜色 */
}

</style>

6.运行效果

点击菜单时候，注意地址栏变化。

三.布局引用在Main中显示

1.修改src\views\main.vue

重点： <router-view></router-view>

完整代码：

<template>
    <div class="common-layout">
      <el-container>
        <el-aside >
          <MainAsideCont />       
        </el-aside>
        <el-container>
          <el-header>Header</el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  <script lang="ts" setup>
  import { defineComponent } from 'vue';
  import MainAsideCont from '@/components/MainAsideCont.vue';


  </script>
  
  <style lang="less" scoped>
  .common-layout {
    height: 100%; /* 设置整个布局的高度为 100%，确保布局占满整个视口 */
    width: 100%; /* 设置整个布局的宽度为 100%，确保布局占满整个视口 */
    .el-container {
      height: 100%; /* 确保内部的 el-container 也占满整个父容器的高度 */
    }
    .el-header {
      background-color: #fff ; /* 设置表头的背景色为深黑色 */
      color: #141515; /* 设置表头文字颜色为白色，以便在深色背景上更清晰 */
      display: flex; /* 使用 flex 布局，方便对齐内容 */
      align-items: center; /* 垂直居中对齐内容 */
      justify-content: center; /* 水平居中对齐内容 */
      font-size: 18px; /* 设置文字大小为 18px */
      font-weight: bold; /* 设置文字为加粗 */
    }
    .el-aside {
      background-color:rgba(242, 242, 242, 0.19); /* 设置侧边栏的背景色为浅灰色 */
      color: #333; /* 设置侧边栏文字颜色为深灰色 */
      display: flex; /* 使用 flex 布局，方便对齐内容 */    
      align-items: center; /* 垂直居中对齐内容 */
      justify-content: center; /* 水平居中对齐内容 */
      font-size: 16px; /* 设置文字大小为 16px */
      font-weight: normal; /* 设置文字为正常粗细 */
      height: 100%; /* 确保侧边栏高度占满 */
      width: 200px;
    }
    .el-main {
      background-color: #fff; /* 设置主内容区域的背景色为白色 */
      color: #333; /* 设置主内容区域文字颜色为深灰色 */
      padding: 20px; /* 添加内边距，使内容不紧贴边缘 */
      font-size: 14px; /* 设置文字大小为 14px */
    }
  }
  </style>

2.运行效果

参考文献：

1.element plus menu：http://element-plus.org/zh-CN/component/menu.html

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

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

相关文章

大数据技术发展与应用趋势分析

大数据技术发展与应用趋势分析

大数据技术发展与应用趋势分析 文章目录 大数据技术发展与应用趋势分析1. 大数据概述2 大数据技术架构2.1 数据采集层2.2 数据存储层2.3 数据处理层2.4 数据分析层 3 大数据发展趋势3.1 AI驱动的分析与自动化3.2 隐私保护分析技术3.3 混合云架构的普及3.4 数据网格架构3.5 量子…
阅读更多...
与Linux操作系统相关的引导和服务

与Linux操作系统相关的引导和服务

目录 一.Linux操作系统引导过程 1.1引导过程总览 1.2系统初始化进程 1.2.1init进程 1.2.2sysmted 1.3systemd单元类型 二.排除启动类故障 2.1MBR扇区故障 2.1.1故障原因 2.1.2故障现象 2.1.3解决办法 2.1.4模拟修复MBR扇区故障 1)添加新的硬盘 2&#xff09;进行…
阅读更多...
STM32单片机入门学习——第16节: [6-4] PWM驱动LED呼吸灯PWM驱动舵机PWM驱动直流电机

STM32单片机入门学习——第16节: [6-4] PWM驱动LED呼吸灯PWM驱动舵机PWM驱动直流电机

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难&#xff0c;但我还是想去做&#xff01; 本文写于&#xff1a;2025.04.05 STM32开发板学习——第16节: [6-4] PWM驱动LED呼吸灯&PWM驱动舵机&PWM驱…
阅读更多...
基础框架系列分享：一个通用的Excel报表生成管理框架

基础框架系列分享：一个通用的Excel报表生成管理框架

由于我们系统经常要生成大量的Excel报表&#xff08;Word&#xff0c;PDF报表也有&#xff0c;另行分享&#xff09;&#xff0c;最初始他们的方案是&#xff0c;设计一个表&#xff0c;和Excel完全对应&#xff0c;然后读表&#xff0c;把数据填进去&#xff0c;这显然是非常不…
阅读更多...
Ansible（4）—— Playbook

Ansible（4）—— Playbook

目录 一、Ansible Playbook : 1、Play &#xff1a; 2、Playbook&#xff1a; 二、Ansible Playbook 格式&#xff1a; 1、空格&#xff1a; 2、破折号&#xff08; - &#xff09;&#xff1a; 3、Play 格式&#xff1a; 三、查找用于任务的模块&#xff1a; 1、模块…
阅读更多...
自学-C语言-基础-数组、函数、指针、结构体和共同体、文件

自学-C语言-基础-数组、函数、指针、结构体和共同体、文件

这里写自定义目录标题 代码环境&#xff1a;&#xff1f;问题思考&#xff1a;一、数组二、函数三、指针四、结构体和共同体五、文件问题答案&#xff1a; 代码环境&#xff1a; Dev C &#xff1f;问题思考&#xff1a; 把上门的字母与下面相同的字母相连&#xff0c;线不能…
阅读更多...
蓝桥云客--团队赛

蓝桥云客--团队赛

2.团队赛【算法赛】 - 蓝桥云课 问题描述 蓝桥杯最近推出了一项团队赛模式&#xff0c;要求三人组队参赛&#xff0c;并规定其中一人必须担任队长。队长的资格很简单&#xff1a;其程序设计能力值必须严格大于其他两名队友程序设计能力值的总和。 小蓝、小桥和小杯正在考虑报名…
阅读更多...
C-S模式之实现一对一聊天

C-S模式之实现一对一聊天

天天开心&#xff01;&#xff01;&#xff01; 文章目录 一、如何实现一对一聊天&#xff1f;1. 服务器设计2. 客户端设计3. 服务端代码实现4. 客户端代码实现5. 实现说明6.实验结果 二、改进常见的服务器高并发方案1. 多线程/多进程模型2. I/O多路复用3. 异步I/O&#xff08;…
阅读更多...
[Deep-ML]Transpose of a Matrix（矩阵的转置）

[Deep-ML]Transpose of a Matrix（矩阵的转置）

Transpose of a Matrix&#xff08;矩阵的转置&#xff09; 题目链接&#xff1a; Transpose of a Matrix&#xff08;矩阵的转置&#xff09;https://www.deep-ml.com/problems/2 题目描述&#xff1a; 难度&#xff1a; easy&#xff08;简单&#xff09;。 分类&#…
阅读更多...
智慧节能双突破 强力巨彩谷亚VK系列刷新LED屏使用体验

智慧节能双突破 强力巨彩谷亚VK系列刷新LED屏使用体验

当前全球节能减排趋势明显&#xff0c;LED节能屏作为显示技术的佼佼者&#xff0c;正逐渐成为市场的新宠。强力巨彩谷亚万境VK系列节能智慧屏凭借三重技术保障、四大智能设计以及大师臻彩画质&#xff0c;在实现节能效果的同时&#xff0c;更在智慧显示领域树立新的标杆。 　　…
阅读更多...
html 给文本两端加虚线自适应

html 给文本两端加虚线自适应

效果图&#xff1a; <div class"separator">文本 </div>.separator {width: 40%;border-style: dashed;display: flex;align-items: center;color: #e2e2e2;font-size: 14px;line-height: 20px;border-color: #e2e2e2;border-width: 0; }.separator::bef…
阅读更多...
leetcode4.寻找两个正序数组中的中位数

leetcode4.寻找两个正序数组中的中位数

思路源于 LeetCode004-两个有序数组的中位数-最优算法代码讲解 基本思路是将两个数组看成一个数组&#xff0c;然后划分为两个部分&#xff0c;若为奇数左边部分个数多1&#xff0c;若为偶数左边部分等于右边部分个数。i表示数组1划分位置&#xff08;i为4是索引4也表示i的左半…
阅读更多...
0101安装matplotlib_numpy_pandas-报错-python

0101安装matplotlib_numpy_pandas-报错-python

文章目录 1 前言2 报错报错1&#xff1a;ModuleNotFoundError: No module named distutils报错2&#xff1a;ERROR:root:code for hash blake2b was not found.报错3&#xff1a;**ModuleNotFoundError: No module named _tkinter**报错4&#xff1a;UserWarning: Glyph 39044 …
阅读更多...
OSCP - Proving Grounds- SoSimple

OSCP - Proving Grounds- SoSimple

主要知识点 wordpress 插件RCE漏洞sudo -l shell劫持 具体步骤 依旧是nmap 起手&#xff0c;只发现了22和80端口&#xff0c;但80端口只能看到一张图 Nmap scan report for 192.168.214.78 Host is up (0.46s latency). Not shown: 65533 closed tcp ports (reset) PORT …
阅读更多...
C语言求3到100之间的素数

C语言求3到100之间的素数

一、代码展示 二、运行结果 三、感悟思考 注意: 这个题思路他是一个试除法的一个思路 先进入一个for循环 遍历3到100之间的数字 第二个for循环则是 判断他不是素数 那么就直接退出 这里用break 是素数就打印出来 在第一个for循环内 第二个for循环外
阅读更多...
【2025】物联网发展趋势介绍

【2025】物联网发展趋势介绍

目录 物联网四层架构感知识别层网络构建层管理服务层——**边缘存储**边缘计算关键技术&#xff1a;综合应用层——信息应用 物联网四层架构 综合应用层&#xff1a;信息应用 利用获取的信息和知识&#xff0c;支持各类应用系统的运转 管理服务层&#xff1a;信息处理 对数据进…
阅读更多...
如何查看 MySQL 的磁盘空间使用情况：从表级到数据库级的分析

如何查看 MySQL 的磁盘空间使用情况：从表级到数据库级的分析

在日常数据库管理中&#xff0c;了解每张表和每个数据库占用了多少磁盘空间是非常关键的。这不仅有助于我们监控数据增长&#xff0c;还能为性能优化提供依据。 Google Gemini中国版调用Google Gemini API&#xff0c;中国大陆优化&#xff0c;完全免费&#xff01;https://ge…
阅读更多...
汇编学习之《移位指令》

汇编学习之《移位指令》

这章节学习前需要回顾之前的标志寄存器的内容&#xff1a; 汇编学习之《标志寄存器》 算数移位指令 SAL (Shift Arithmetic Left)算数移位指令 : 左移一次&#xff0c;最低位用0补位&#xff0c;最高位放入EFL标志寄存器的CF位&#xff08;进位标志&#xff09; OllyDbg查看…
阅读更多...
Nature Communications上交、西湖大学、复旦大学研发面向机器人多模式运动的去电子化刚弹耦合高频自振荡驱动单元

Nature Communications上交、西湖大学、复旦大学研发面向机器人多模式运动的去电子化刚弹耦合高频自振荡驱动单元

近年来&#xff0c;轻型仿生机器人因其卓越的运动灵活性与环境适应性受到国际机器人领域的广泛关注。然而&#xff0c;现有气动驱动器普遍受限于低模量粘弹性材料的回弹滞后效应与能量耗散特性&#xff0c;加之其"非刚即柔"的二元结构设计范式&#xff0c;难以同时满…
阅读更多...
对备忘录模式的理解

对备忘录模式的理解

对备忘录模式的理解 一、场景1、题目【[来源](https://kamacoder.com/problempage.php?pid1095)】1.1 题目描述1.2 输入描述1.3 输出描述1.4 输入示例1.5 输出示例 2、理解需求 二、不采用备忘录设计模式1、代码2、问题3、错误的备忘录模式 三、采用备忘录设计模式1、代码1.1 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023