当前位置: 首页 > 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输出…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...