当前位置: 首页 > news >正文

【Vue3 博物馆管理系统】使用Vue3、Element-plus菜单组件构建前台用户菜单

系列文章目录

第一章 定制上中下(顶部菜单、底部区域、中间主区域显示)三层结构首页
第二章 使用Vue3、Element-plus菜单组件构建菜单
[第三章 使用Vue3、Element-plus菜单组件构建轮播图]
[第四章 使用Vue3、Element-plus菜单组件构建组图文章]


文章目录

  • 系列文章目录
    • @[TOC](文章目录)
  • 前言
  • 1、学习Element-plus 的导航组件 NavMenu 导航菜单
    • 1.1、NavMenu 导航菜单
    • 1.2、横向导航菜单
    • 1.3、完整的顶部区域数据和效果展示
    • 1.4、再来个子菜单代码和效果
    • 1.5、学习Menu的API
      • 1.5.1、Menu Attribute
      • 1.5.2、Menu Methods
      • 1.5.3、Menu Events
      • 1.5.4、SubMenu Attribute
      • 1.5.5、Menu-Item Attribute
  • 总结

在这里插入图片描述

前言

上一章节给我们把博物馆管理系统打了个地基,基本的产品架构和框架已经都落实到位。
这一章节,我们做1件事:构建顶部区域的菜单,包括父子菜单
在这里插入图片描述

1、学习Element-plus 的导航组件 NavMenu 导航菜单

1.1、NavMenu 导航菜单

为网站提供导航功能的菜单

1.2、横向导航菜单

导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。
上一章节我们的页面布局,顶部采用横向导航菜单布局,也就是水平模式的菜单,因此需要水平模式的导航菜单。话不多说,上代码。

<el-menu:default-active="1"class="el-menu-demo"mode="horizontal"active-text-color="#409eff"router:collapse="false">....................
</el-menu>

1.3、完整的顶部区域数据和效果展示

在这里插入图片描述

	<!-- 顶栏容器 --><el-header style="margin-top: 10px;"><el-menu:default-active="1"class="el-menu-demo"mode="horizontal"active-text-color="#409eff"router:collapse="false"><div class="logo" style="width: 10%;" ><router-link to="/"><span style="width: 240px; position: absolute; top: 20px; left: 60px; ">罗刹海市博物馆</span><img  src="./assets/logo.png" style="height: 50px;" alt /></router-link></div><el-menu-item index="/" >首页</el-menu-item><el-sub-menu index="/about" >关于我们</el-sub-menu><el-menu-item index="/clzl">陈列展览</el-menu-item><el-menu-item index="/sc">收藏</el-menu-item><el-menu-item index="/cg">参观</el-menu-item><el-menu-item index="/hd" > <template #title>活动</template></el-menu-item><el-menu-item index="/xx" >学习</el-menu-item><el-menu-item index="/yj" >研究</el-menu-item></el-menu></el-header>

1.4、再来个子菜单代码和效果

在菜单中通过submenu组件可以生成二级菜单
在这里插入图片描述

	<el-container><!-- 顶栏容器 --><el-header style="margin-top: 10px;"><el-menu:default-active="1"class="el-menu-demo"mode="horizontal"active-text-color="#409eff"router:collapse="false"><div class="logo" style="width: 10%;" ><router-link to="/"><span style="width: 240px; position: absolute; top: 20px; left: 60px; ">罗刹海市博物馆</span><img  src="./assets/logo.png" style="height: 50px;" alt /></router-link></div><el-menu-item index="/" >首页</el-menu-item><el-sub-menu index="/about" ><template #title>关于我们</template><el-menu-item index="/about/gk">概況</el-menu-item><el-menu-item index="/about/ls">历史</el-menu-item><el-menu-item index="/about/zjjs">专家介绍</el-menu-item><el-menu-item index="/about/yzzc">院长致辞</el-menu-item><el-menu-item index="/about/mhgs">幕后故事</el-menu-item><el-menu-item index="/about/bwgzy">博物馆之友</el-menu-item><el-menu-item index="/about/xwzx">新闻资讯</el-menu-item></el-sub-menu><el-menu-item index="/clzl">陈列展览</el-menu-item><el-menu-item index="/sc">收藏</el-menu-item><el-menu-item index="/cg">参观</el-menu-item><el-menu-item index="/hd" > <template #title>活动</template></el-menu-item><el-menu-item index="/xx" >学习</el-menu-item><el-menu-item index="/yj" >研究</el-menu-item></el-menu></el-header>

1.5、学习Menu的API

1.5.1、Menu Attribute

参数说明类型可选值默认值
mode模式stringhorizontal / verticalvertical
collapse是否水平折叠收起菜单(仅在 mode 为 vertical 时可用)booleanfalse
background-color菜单的背景色(仅支持 hex 格式)string#ffffff
text-color菜单的文字颜色(仅支持 hex 格式)string#303133
active-text-color当前激活菜单的文字颜色(仅支持 hex 格式)string#409EFF
default-active当前激活菜单的 indexstring
default-openeds当前打开的 sub-menu 的 index 的数组Array
unique-opened是否只保持一个子菜单的展开booleanfalse
menu-trigger子菜单打开的触发方式(只在 mode 为 horizontal 时有效)stringhover / clickhover
router是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 booleanfalse
collapse-transition是否开启折叠动画booleantrue

1.5.2、Menu Methods

方法名称说明参数
open展开指定的 sub-menuindex: 需要打开的 sub-menu 的 index
close收起指定的 sub-menuindex: 需要收起的 sub-menu 的 index

1.5.3、Menu Events

事件名称说明回调参数
select菜单激活回调index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
opensub-menu 展开的回调index: 打开的 sub-menu 的 index, indexPath: 打开的 sub-menu 的 index path
closesub-menu 收起的回调index: 收起的 sub-menu 的 index, indexPath: 收起的 sub-menu 的 index path

1.5.4、SubMenu Attribute

参数说明类型可选值默认值
index唯一标志string/nullnull
popper-class弹出菜单的自定义类名string
show-timeout展开 sub-menu 的延时number300
hide-timeout收起 sub-menu 的延时number300
disabled是否禁用 booleanfalse
popper-append-to-body是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时,可尝试修改该属性boolean一级子菜单:true / 非一级子菜单:false

1.5.5、Menu-Item Attribute

参数说明类型可选值默认值
index唯一标志string
routeVue Router路径对象Object
disabled是否禁用booleanfalse

总结

以上就是今天要讲的内容,本文仅仅简单介绍了博物馆管理前台用户导航菜单布局,涉及Element-plus 的菜单,菜单的方向,子菜单,菜单、子菜单的属性、样式等。

相关文章:

【Vue3 博物馆管理系统】使用Vue3、Element-plus菜单组件构建前台用户菜单

系列文章目录 第一章 定制上中下&#xff08;顶部菜单、底部区域、中间主区域显示&#xff09;三层结构首页 第二章 使用Vue3、Element-plus菜单组件构建菜单 [第三章 使用Vue3、Element-plus菜单组件构建轮播图] [第四章 使用Vue3、Element-plus菜单组件构建组图文章] 文章目…...

Windows 11清除无效、回收站、过期、缓存、补丁更新文件

Windows 11与之前的Windows版本类似&#xff0c;也需要定期清理无效、垃圾、过期、缓存文件来保持系统性能和存储空间的优化。以下是在Windows 11中进行这些清理操作的一些建议方法&#xff1a; 磁盘清理工具 Windows 11内置了磁盘清理工具&#xff0c;可以帮助你删除临时文件…...

栈和队列详解(2)

目录 一、什么是队列&#xff1f; 二、创建一个我们自己的队列 1.前置准备 1.1需要的三个文件 1.2结构体的创建和头文件的引用 2.接口的实现 2.1初始化队列 2.2入队 2.3队列元素个数和判空 2.4取队头元素和队尾元素 2.5出队 2.6摧毁队列 2.7测试接口 三、所有代码 1.…...

EMC传导干扰滤波电路设计

1.EMC概念 2.EMC 传导干扰详解 EMC传导滤波电路的设计--传导干扰详解 3.EMC 传导干扰的测量方法 4.EMC 滤波电路设计 5.浪涌抑制电路设计 6.开关电源的安全要求 7.当前开关电源灯的应用...

【win10专业版远程控制】 自带远程桌面公司内网电脑

使用win10专业版自带远程桌面公司内网电脑 文章目录 使用win10专业版自带远程桌面公司内网电脑 在现代社会中&#xff0c;各类电子硬件已经遍布我们身边&#xff0c;除了应用在个人娱乐场景的消费类电子产品外&#xff0c;各项工作也离不开电脑的帮助&#xff0c;特别是涉及到数…...

Ubuntu 20.04 中安装docker一键安装脚本

直接上脚本&#xff0c;依次执行如下命令即可 wget http://apollo-pkg-beta.bj.bcebos.com/docker_install.sh bash docker_install.shdocker install docker operation system Ubuntu 18.04 直接上脚本&#xff0c;依次执行如下命令即可 ways1 : wget https://github.com…...

Mysql之安装-字符集设置-用户及权限操作-sqlmode设置

1、概述 MySQL支持大型数据库&#xff0c;支持5000万条记录的数据仓库&#xff0c;32位系统表文件最大可支持4GB&#xff0c;64位系统支持最大的表文件为8TB。使用标准的SQL数据语言形式。 2、Linux的mysql安装 &#xff08;1&#xff09;检查是否已安装&#xff1a;rpm -qa…...

腾讯云香港服务器租用价格_CN2线路延迟速度测试

腾讯云香港服务器&#xff0c;目前中国香港地域轻量应用服务器可选配置2核2G20M、2核2G30M、2核4G30M&#xff0c;操作系统可选Windows和Linux&#xff0c;不只是香港云服务器&#xff0c;新加坡、硅谷、法兰克福和东京服务器均有活动&#xff0c;腾讯云服务器网分享腾讯云境外…...

机器人静力学与刚度模型学习笔记

总算进行到刚度模型了。。。 ❤ 2023.8.6 ❤ 机器人静力学 学习资料 →→→【4-10机器人的静力分析】 机器人末端广义力 F [ f m ] [ f x f y f z m x m y m z ] F\left[\begin{matrix}f\\m\\\end{matrix}\right]\left[\begin{matrix}f_x\\f_y\\f_z\\m_x\\m_y\\m_z\\\end{…...

geeemap学习总结(1)——Anaconda-VSCode-geemap环境安装与配置

配置conda geemap 环境 通过Anaconda配置geemap环境较为方便&#xff0c;首先需在系统中完成 Anaconda安装。创建名为geemap的环境conda create -n geemap切换到新建的环境conda activate geemap安装geemap依赖包conda install -c conda-forge geemap 安装mambaconda install …...

.netcore grpc一元方法详解

一、grpc服务端搭建 打开visual studio--》新建项目--》创建ASP.NET Core gRPC服务。 这里我是用的.NET 6.0做为底层框架&#xff0c;使用该框架支持grpc的功能更全面。令注使用nuget包Grpc.AspNetCore这里我使用的是2.40.0版本。 // 创建dollar.proto文件syntax "prot…...

自学网络安全(黑客)全网详细路线

前言 web渗透是网络安全大行业里入门板块&#xff0c;就像十年前的软件&#xff0c;前景非常被看好&#xff0c;薪资也很诱人。与软件测试和前端开发只需掌握一定的编程能力不同的是&#xff0c;渗透需要掌握的知识内容较多&#xff0c;花费的时间较长&#xff0c;渗透测试掌握…...

上半年210个数字化大单,花落谁家?

2023年&#xff0c;各地数字化采购项目有怎样的进展&#xff1f;最近&#xff0c;我们通过中国政府采购网、中国招投标公共服务平台、天眼查、企查查等渠道&#xff0c;梳理了2023年上半年政企数字化项目的中标情况&#xff0c;并从中看到今年数字化项目的市场特点。 01 金融千…...

Integer.bitCount()

先看一道算法题&#xff1a; 剑指 Offer 15. 二进制中1的个数 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位数为 1 的个数&#xff08;也被称为 汉明重量).&#xff09;。 提示&#xff1a; …...

【Gitee的使用】Gitee的简单使用,查看/创建SSH公匙、创建版本库、拉取代码、提交代码

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 本篇文章简单介绍&#xff0c;如何在Gitee上面创建版本库、拉取…...

Java 跨平台多媒体处理样例

代码 import cn.hutool.core.exceptions.ExceptionUtil; import cn.hutool.core.io.FileUtil; import cn.hutool.core.io.IoUtil; import cn.hutool.core.util.CharsetUtil; import lombok.extern.slf4j.Slf4j; import ws.schild.jave.Encoder; import ws.schild.jave.Multime…...

cmake基础(3)——安装

一、简介 install命令用于指定安装时的规则&#xff0c;由于安装命令比较复杂&#xff0c;这里做一部分内容的介绍&#xff0c;后续用到再继续完善。 1.命令简介 本文档基于3.20&#xff0c;目前有6种安装方式。 install(TARGETS <target>... [...]) install({FILES …...

​LeetCode解法汇总1572. 矩阵对角线元素的和

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 给你一个正…...

BFC(Block formatting context 块级格式化上下文)

1、开启了BFC能解决什么问题&#xff1f; 给父元素开启BFC&#xff0c;其子元素不会再产生 margin 塌陷问题。自己不会被其他浮动元素所覆盖。就算其子元素浮动&#xff0c;元素自身高度也不会塌陷。 2、如何开启&#xff1f; 根元素浮动元素绝对定位、固定定位的元素行内块…...

Leetcode-每日一题【剑指 Offer 14- II. 剪绳子 II】

题目 2、3、3的三段&#xff0c;此时得到的最大乘积是18。 答案需要取模 1e97&#xff08;1000000007&#xff09;&#xff0c;如计算初始结果为&#xff1a;1000000008&#xff0c;请返回 1。 示例 1&#xff1a; 输入: 2输出: 1解释: 2 1 1, 1 1 1 示例 2: 输入: 10输出…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...