位置: IT常识 - 正文

Vue开发实例(11)之el-menu实现左侧菜单导航(vue实战开发项目视频)

编辑:rootadmin
Vue开发实例(11)之el-menu实现左侧菜单导航 作者简介

推荐整理分享Vue开发实例(11)之el-menu实现左侧菜单导航(vue实战开发项目视频),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue开发视频教程,vue开发实例(07)之编写头部页面,vue实例教程,vue项目开发实战案例,vue开发案例,vue开发案例,vue开发实例(07)之编写头部页面,vue开发案例,内容如对您有帮助,希望把文章链接给更多的朋友!

作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java、JavaScript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢迎您关注,期待与您一起学习、成长、起飞!

引言

Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手、带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了解也是很有必要的,谁也不确定公司以后会不会让我做前端去,做些简单的实例既不需要花费很多时间,也可以提高自己的自信和成就感,所以跟着明哥走,没有错,来吧!

导航

✪  Vue开发实例目录总索引 ◄ 上一篇【10】Link 文字链接 ► 下一篇【12】实现动态左侧菜单导航

一级菜单实现最简单的一级菜单

在之前的Aside.vue中去实现代码,一级菜单其实非常的简单,直接用el-menu 和el-menu-item 就行,Aside.vue代码如下:

<template> <div> <el-menu> <el-menu-item>一级菜单1</el-menu-item> <el-menu-item>一级菜单2</el-menu-item> <el-menu-item>一级菜单3</el-menu-item> </el-menu> </div></template><script> export default { name: "Aside" }</script><style scoped></style>

效果图如下:

设置菜单背景颜色和文字颜色

在el-menu中设置 background-color 和 text-color 属性

<template> <div> <el-menu background-color="#545c64" text-color="#ffffff"> <el-menu-item>一级菜单1</el-menu-item> <el-menu-item>一级菜单2</el-menu-item> <el-menu-item>一级菜单3</el-menu-item> </el-menu> </div></template>

设置选中后菜单文字颜色

设置 active-text-color 属性,但是必须在需要生效的子菜单中设置index属性,否则不生效,先不设置index

<template> <div> <el-menu background-color="#545c64" text-color="#ffffff" active-text-color="#ffd04b"> <el-menu-item>一级菜单1</el-menu-item> <el-menu-item>一级菜单2</el-menu-item> <el-menu-item>一级菜单3</el-menu-item> </el-menu> </div></template>

可以看到我点击以后,菜单文字的颜色没有变化,现在来加入index属性

<template> <div> <el-menu background-color="#545c64" text-color="#ffffff" active-text-color="#ffd04b"> <el-menu-item index="1">一级菜单1</el-menu-item> <el-menu-item index="2">一级菜单2</el-menu-item> <el-menu-item index="3">一级菜单3</el-menu-item> </el-menu> </div></template>

上图我们可以看到开始是没有选中菜单的,是可以设置默认的选中菜单的,设置default-active为对应的index值即可,比如我设置默认选中第2个菜单,第2个菜单的index为2,所以我们在el-menu中加入 default-active=“2”

<template> <div> <el-menu background-color="#545c64" text-color="#ffffff" active-text-color="#ffd04b" default-active="2"> <el-menu-item index="1">一级菜单1</el-menu-item> <el-menu-item index="2">一级菜单2</el-menu-item> <el-menu-item index="3">一级菜单3</el-menu-item> </el-menu> </div></template>

刷新页面后,默认选中了第2个菜单

在菜单中加入图标

在菜单中加入图标会使得我们的菜单看起来比较漂亮、舒服,这样涉及到图标的使用,可以参考我前面的文章 :Vue开发实例(08)之Icon图标的使用 用 i 标签即可,在菜单名前面加入 <i class=“el-icon-XXX”>,XXX是图标的名称。

<template> <div> <el-menu background-color="#545c64" text-color="#ffffff" active-text-color="#ffd04b" default-active="2"> <el-menu-item index="1"><i class="el-icon-location"></i>一级菜单1</el-menu-item> <el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item> <el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item> </el-menu> </div></template>

二级菜单实现二级菜单

修改一级菜单1为2级菜单

<template> <div> <el-menu background-color="#545c64" text-color="#ffffff" active-text-color="#ffd04b" default-active="2" > <el-submenu index="1"> <template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-submenu> <el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item> <el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item> </el-menu> </div></template>

Vue开发实例(11)之el-menu实现左侧菜单导航(vue实战开发项目视频)

修改分析【其实很简单】:

将el-menu 修改为 el-submenu按钮名称、图标用 template标签包裹,必须加入 slot="title"属性,否则菜单样式不对。加入新的两个 el-menu-item。三级菜单实现三级菜单

跟二级菜单的修改方式是一样的,就是多加一层

<template> <div> <el-menu background-color="#545c64" text-color="#ffffff" active-text-color="#ffd04b" default-active="2"> <el-submenu index="1"> <template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template> <el-submenu index="1-1"> <template slot="title"><i class="el-icon-location"></i><span>选项1</span></template> <el-menu-item index="1-1-1">选项1-1</el-menu-item> <el-menu-item index="1-1-2">选项1-2</el-menu-item> </el-submenu> <el-submenu index="1-2"> <template slot="title"><i class="el-icon-location"></i><span>选项2</span></template> <el-menu-item index="1-2-1">选项2-1</el-menu-item> <el-menu-item index="1-2-2">选项2-2</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item> <el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item> </el-menu> </div></template><script> export default { name: "Aside" }</script><style scoped></style>

加入相关事件

打开open、关闭close、选择select 3个事件 在el-menu中加入三个事件属性,并编写对应的method

<template> <div> <el-menu background-color="#545c64" text-color="#ffffff" active-text-color="#ffd04b" default-active="2" @open="handleOpen" @close="handleClose" @select="handSelect"> <el-submenu index="1"> <template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template> <el-submenu index="1-1"> <template slot="title"><i class="el-icon-location"></i><span>选项1</span></template> <el-menu-item index="1-1-1">选项1-1</el-menu-item> <el-menu-item index="1-1-2">选项1-2</el-menu-item> </el-submenu> <el-submenu index="1-2"> <template slot="title"><i class="el-icon-location"></i><span>选项2</span></template> <el-menu-item index="1-2-1">选项2-1</el-menu-item> <el-menu-item index="1-2-2">选项2-2</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item> <el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item> </el-menu> </div></template><script> export default { name: "Aside", methods: { handleOpen(key, keyPath) { console.log("打开:",key, keyPath); }, handleClose(key, keyPath) { console.log("关闭:",key, keyPath); }, handSelect(key, keyPath) { console.log("选择:",key, keyPath); } } }</script><style scoped></style>

实现点击菜单跳转

当点击菜单项,能够在右边的Main窗口中显示对应的页面。

创建3个页面 Main1.vue Main2.vue Main2.vue<template> <div> 这是Main1 </div></template><script> export default { name: "Main1" }</script><style scoped></style><template> <div> 这是Main2 </div></template><script> export default { name: "Main2" }</script><style scoped></style><template> <div> 这是Main3 </div></template><script> export default { name: "Main3" }</script><style scoped></style>配置路由在src下创建 router.js创建了主路由index,就是进入的主页面这3个index子路由,用来跳转,分别对应 main1 main2 main3 几个页面。子路由的跳转位置为,index的Main位置,因为我们管理系统只需要Main位置发生改变,头部、左边导航、下方footer是不需要改变的。

router.js如下:

import VueRouter from "vue-router"import Index from "./components/Index";const routes = [ //一级路由 { path: '/index', name: 'index', component: Index, //路由嵌套 children:[ {path: '/index/menu1',component: () => import('./components/Main1.vue')}, {path: '/index/menu2',component: () => import('./components/Main2.vue')}, {path: '/index/menu3',component: () => import('./components/Main3.vue')} ] }]const router = new VueRouter({ mode:'history', routes})export default router;

在main.js中配置这个路由,让路由生效 在原来的Index.vue页面,设置路由跳转位置,这里我们在原来的Main位置修改位 router-view即可。

菜单中加入路由配置

这里我们使用一级菜单,简单方便,修改Aside.vue的代码。 在el-menu里面加入 router属性 在el-menu-item 的index,设置对应的子路由

<template> <div style="height: 100%;"> <el-menu background-color="#545c64" text-color="#ffffff" active-text-color="#ffd04b" class="el-menu-vertical-demo" router> <el-menu-item index="/index/menu1"><i class="el-icon-location"></i>一级菜单1</el-menu-item> <el-menu-item index="/index/menu2"><i class="el-icon-document"></i>一级菜单2</el-menu-item> <el-menu-item index="/index/menu3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item> </el-menu> </div></template><script> export default { name: "Aside" }</script><style scoped> .el-menu-vertical-demo{ height: 100%; }</style>

我们进入index主路由 点击左侧导航菜单

处理默认的Main窗口为空的情况

刚进入index路由的时候,我们看到main窗口里面是没有东西的

这样显然不好看,于是我们可以设置默认的跳转位置,设置如下:

在子路由中添加一个新的路由,用来默认跳转在主路由中配置redirect 值为这个子路由

上方其实就是一个重定向的操作,当直接输入index路由时就会默认跳转到Main路由里面,这样就会有个默认的页面了。

下方我们在地址栏只输入到index,敲回车后,会在后面默认加上 “/Main”,直接重定向了,同时Main窗口的页面也显示了我们指定的页面。

小结

这节总结了“el-menu实现左侧菜单导航”,希望能对大家有所帮助,请各位小伙伴帮忙 【点赞】+【收藏】+ 【评论区打卡】, 如果有兴趣跟小明哥一起学习Java的,【关注一波】不迷路哦。 请到文章下方帮忙【一键三连】谢谢哈!

导航

✪  Vue开发实例目录总索引 ◄ 上一篇【10】Link 文字链接 ► 下一篇【12】实现动态左侧菜单导航

热门专栏推荐

【1】Java小游戏(俄罗斯方块、植物大战僵尸等) 【2】JavaWeb项目实战(图书管理、宿舍管理等) 【3】JavaScript精彩实例(飞机大战、验证码等) 【4】Java小白入门200例 【5】从零学Java、趣学Java 【6】IDEA从零到精通

本文链接地址:https://www.jiuchutong.com/zhishi/295316.html 转载请保留说明!

上一篇:Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(开发导航栏及公共部分)(vuecli项目实战)

下一篇:VSCode中Prettier插件&依赖安装及冲突解决(vscode插件vuter)

  • 小红书top榜单在哪(小红书排名第一)

    小红书top榜单在哪(小红书排名第一)

  • 消息提示铃声怎么使用自定义音乐铃声(消息提示音铃声)

    消息提示铃声怎么使用自定义音乐铃声(消息提示音铃声)

  • 剪映删除的视频要如何恢复(剪映删除的视频怎么找回没有云备份)

    剪映删除的视频要如何恢复(剪映删除的视频怎么找回没有云备份)

  • 苹果11数据线怎么看真假(苹果11数据线怎么连接电脑上网)

    苹果11数据线怎么看真假(苹果11数据线怎么连接电脑上网)

  • 系统总线是指

    系统总线是指

  • IT人员,高级语言的编程使用,电脑基础的知识。(it高级证书)

    IT人员,高级语言的编程使用,电脑基础的知识。(it高级证书)

  • 重装系统可以保留电脑上的文件吗(重装系统可以保留桌面文件吗)

    重装系统可以保留电脑上的文件吗(重装系统可以保留桌面文件吗)

  • qq注册验证码是什么意思(注册qq验证码一直在验证)

    qq注册验证码是什么意思(注册qq验证码一直在验证)

  • 钉钉只能一个手机登录吗(钉钉一个手机只能打一次卡吗)

    钉钉只能一个手机登录吗(钉钉一个手机只能打一次卡吗)

  • 录音和音乐怎么一起放(录音和音乐怎么弄到一起)

    录音和音乐怎么一起放(录音和音乐怎么弄到一起)

  • 目前最常用的计算机机箱类型为(目前最常用的计算机信息检索技术是)

    目前最常用的计算机机箱类型为(目前最常用的计算机信息检索技术是)

  • 注销qq一般要多久(qq注销需要多少钱)

    注销qq一般要多久(qq注销需要多少钱)

  • iphone怎么屏蔽骚扰电话和短信(iphone怎么屏蔽骚扰电话)

    iphone怎么屏蔽骚扰电话和短信(iphone怎么屏蔽骚扰电话)

  • soul注销账号还能重新申请吗(soul注销账号还能注册吗)

    soul注销账号还能重新申请吗(soul注销账号还能注册吗)

  • 微信清除缓存图片还在吗(微信清除缓存图片恢复)

    微信清除缓存图片还在吗(微信清除缓存图片恢复)

  • 添加多条脚注怎么弄(脚注怎么多个脚注用一个解释)

    添加多条脚注怎么弄(脚注怎么多个脚注用一个解释)

  • 抖音帮上热门对方知道吗(抖音帮上热门对自己账号有影响吗)

    抖音帮上热门对方知道吗(抖音帮上热门对自己账号有影响吗)

  • 小红书为什么下不了(小红书为什么下载不了图片)

    小红书为什么下不了(小红书为什么下载不了图片)

  • 原彩显示耗电吗(苹果开原彩显示耗电吗)

    原彩显示耗电吗(苹果开原彩显示耗电吗)

  • 怎么缓存韩剧TV上的视频(韩剧tv缓存到外储存)

    怎么缓存韩剧TV上的视频(韩剧tv缓存到外储存)

  • emui10什么时候出(emui10什么时候发布的)

    emui10什么时候出(emui10什么时候发布的)

  • 天猫精灵的蓝牙怎么连接(手机搜不到天猫精灵的蓝牙)

    天猫精灵的蓝牙怎么连接(手机搜不到天猫精灵的蓝牙)

  • YOLOv5-v6.0学习笔记(yolov5m)

    YOLOv5-v6.0学习笔记(yolov5m)

  • 资金账簿印花税减半征收后可以叠加享受优惠吗
  • 新办营利性医疗机构是否免征土地使用税和房产税?
  • 什么合同属于有效合同
  • 小规模纳税人注册资金最高多少
  • 电子税务局在哪里看财务报表
  • 进口增值税电子税单抵扣
  • 房产税的计税依据有哪些
  • 用于本企业职工的福利应当征收消费税吗
  • 水利建设工程
  • 开办费转入管理费用分录
  • 利润分配亏损太多如何处理?
  • 上市公司现金分红对股价的影响
  • 个体户增值税怎么算
  • 分包与转包的区别 法院
  • 专票密码区压线可以报销吗
  • 发票请求流水号不能为空
  • 广告公司怎样
  • 销售支付运费属什么科目
  • 代理销售怎么记账
  • 去年盈利今年亏损怎么表达
  • 销售二手设备税率
  • 研发人员的工会经费计入研发费用吗
  • 出售子公司全部股权的股权账务处理
  • 不动产抵押合同管辖法院
  • 没进项能开销项吗
  • 小规模固定资产会计科目
  • 国产linux系统有哪些
  • 餐饮发票可以计入研发费用吗
  • 公对公如何转账不用开票
  • 交房产税要带身份证嘛
  • PHP:curl_close()的用法_cURL函数
  • php的数组函数
  • 什么是产品?产品的举例子
  • lstm多对多
  • vue父组件引入子组件
  • 抵债资产的账务处理
  • 如何做世界上最小的遥控飞机
  • 出口货物的出口日期以
  • 借银行卡给别人过账有什么风险
  • nvidia-smi failed to initialize
  • 93.transformer、多头注意力以及代码实现
  • iframe标签表示的框架
  • laravel event
  • 怎样网上抄税
  • 航空公司可以开发票吗
  • 购货方收到销售折扣发票怎么入账
  • 金税四期什么时候全国运行
  • 评估价计入什么科目
  • 房地产项目开发的基本流程是什么
  • 投资出去的钱如何入账
  • 没有工会的企业收到返还的工会经费派什么用场
  • 固定资产原值的构成内容是
  • 商业企业包装物包括哪些
  • mysql查看使用情况
  • linux wget命令详解
  • tcpip. sys
  • linux系统中对新磁盘分区的命令
  • linux 命令详解
  • mac运行很卡怎么办
  • linux操作系统版本有哪些
  • 设计制作个性化文集答案
  • win7怎么看电脑ip地址
  • javascript 引入
  • cocos2d android
  • python中numpy.zeros(np.zeros)的使用方法
  • css div内容自动换行
  • android study
  • javascript+
  • gpu解码视频
  • jquery手册手机版
  • javascript怎么编写
  • 江宁市民之家上班时间?
  • 车辆购置税2024年政策
  • 安家费购房补贴区别
  • 国际税收管理处忙不忙
  • 居住证在粤省事怎么查询
  • 划拨土地是否可以出租的法律规定
  • 网上增值税发票验旧
  • 免税开普票还是专票
  • 领的增值税发票怎么读入?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设