位置: IT常识 - 正文

Vue中二级菜单的实现(vue二级菜单的隐藏与显示)

编辑:rootadmin
Vue中二级菜单的实现

推荐整理分享Vue中二级菜单的实现(vue二级菜单的隐藏与显示),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue二级菜单功能,vue二级下拉导航栏,vue层级菜单,vue二级菜单栏实现,vue二级菜单功能,vue二级菜单的隐藏与显示,vue下拉二级子菜单怎么实现,vue二级菜单的隐藏与显示,内容如对您有帮助,希望把文章链接给更多的朋友!

在不使用ElementUi等框架的情况下,制作一个二级菜单,网上搜寻很多资料,但部分要不只显示HTML结构,不显示CSS样式,要不就是复杂的让人无法理解。

效果图:

针对菜单做了CSS样式修饰,给一级二级菜单都添加了鼠标悬浮事件,当悬浮到某个菜单时,背景颜色,字体颜色发生改变。当点击某个一级菜单时,二级菜单实现显示和隐藏的动态切换。

菜单的HTML结构:<div class="nav">--------------------一级菜单------------------<ul><liv-for="item in menus":key="item.id"@click="changeCheck(item.id)":class="{ check: currentTag == item.path }"class="mainMenu"><router-link:to="{name:item.path,params:userName}"class="mainA"@click.native="TabName(item.title)">{{ item.title }}</router-link>------------------二级菜单----------------------<ul v-if="item.children && item.active"><liclass="subMneu"v-for="(child, index) in item.children":key="index"@click="clickSubMenu(item,child.title)"><router-linkclass="menuB":to="{name:child.path,params:userName}":class="{ menu_active: child.active }">{{ child.title }}</router-link></li></ul></li></ul></div>代码分析:

针对菜单采用的是ul列表,然后采用v-for循环对菜单数据进行循环,菜单采用的是动态样式 : class

当点击菜单的path地址和菜单中的某个path相等时,动态渲染该样式。

li包含<router-link>是为了当点击该菜单时,跳转到相应的内容

菜单的JS代码:Vue中二级菜单的实现(vue二级菜单的隐藏与显示)

data( )函数数据:

export default {components: {},data() {return {menus: [{ id: 1, title: "用户管理", path: "UserMannger", active: false },{id: 2,title: "商品管理",path: "goodsManger",active: false,children: [{ id: 21, title: "增加商品", path: "addGoods", active: false },],},{ di: 3, title: "关于我们", path: "about", active: false },],currentTag: "",tabName: "",flag2: true,// tabName:'用户管理',userName:''};},

JS代码

methods: {changeCheck(id) {const obj = this.menus.find((item) => item.id == id);this.menus.find((item) => {if (item.id == id) {item.active = !item.active;if (item.children) {item.children.active = !item.active;}}});this.currentTag = obj.path;},clickSubMenu(main,val) {this.tabName = valmain.children[0].active = !main.children[0].activemain.active = !main.children[0].active;},backHome() {this.$router.push("/UserMannger/123");},getLogin2(val){this.userName = val},TabName(val){console.log(val);this.tabName = val}},created() {this.$bus.$on('toHome',this.getLogin2)},};

方法中 changeCheck函数分析:

首先先接收点击菜单的id,对menus数字进行遍历,当id相同时,将该菜单的active属性进行动态改变,这样做是为了动态切换样式。在遍历中还要对子菜单进行判断,如果有子菜单则将该子菜单的active属性改变

方法中 clickSubMneu函数分析:

因为该方法是当点击子菜单触发此事件,触发事件时传入该子菜单的一级菜单,然后将该菜单的子菜单的active属性进行动态改变,并且将主菜单的active属性始终与子菜单保持相反。

因为这里只设置了一个子菜单所以下标为0,当需要设置多个子菜单时,还需要传入index和子菜单的index然后进行判断方法和对一级菜单的判断相同。

CSS代码当点击子菜单的a标签的公共样式.menu_active {color: red;display: block;width: 100%;text-decoration: none;color: rgb(255, 208, 75);background-color: #409eff;}菜单修饰.nav {height: 100%;flex-grow: 1;background-color: #001529;ul {.mainMenu {margin-top: 20px;width: 100%;text-align: center;line-height: 50px;color: white;.mainA {display: block;width: 100%;text-decoration: none;color: white;&:hover {background-color: #409eff;}&:active {color: rgb(255, 208, 75);}}}}}

这里采用的SCSS预编译语言:

在菜单css修饰中需要注意的是,一定要给一级菜单和二级菜单起名字,即使scss能够嵌套,依然会发生样式穿透的bug,所以针对一级菜单和二级菜单的样式进行单独修饰。

这里还需要知道的是 scss中有 :active和 : hover 的伪类用法,前者是当点击时触发该样式,后者是鼠标悬浮时触发的样式。

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

上一篇:promise和async用法及区别(详解)(promise async区别)

下一篇:uniapp实现微信支付、支付宝支付(uniapph5微信支付)

  • 手机录屏功能在哪(手机录屏功能在哪里找)

    手机录屏功能在哪(手机录屏功能在哪里找)

  • 苹果12.4.1系统耗电吗(ios12.0怎么样耗电吗)

    苹果12.4.1系统耗电吗(ios12.0怎么样耗电吗)

  • 全家福能不能用沾沾卡复制(全家福可以沾吗)

    全家福能不能用沾沾卡复制(全家福可以沾吗)

  • cpu风扇声音大嗡嗡响(cpu风扇声音大嗡嗡响怎么解决)

    cpu风扇声音大嗡嗡响(cpu风扇声音大嗡嗡响怎么解决)

  • 微信群名怎么设置(微信群名怎么设置两行)

    微信群名怎么设置(微信群名怎么设置两行)

  • 为什么摄像头老是显示离线状态(为什么摄像头老是显示网络异常)

    为什么摄像头老是显示离线状态(为什么摄像头老是显示网络异常)

  • 引导式访问有什么作用(引导式访问有什么好处)

    引导式访问有什么作用(引导式访问有什么好处)

  • 登录账号和密码怎么填(网页如何记住你的登录账号和密码)

    登录账号和密码怎么填(网页如何记住你的登录账号和密码)

  • sim卡发送了一条文本信息什么意思(手机一直显示您的sim卡发送了一条)

    sim卡发送了一条文本信息什么意思(手机一直显示您的sim卡发送了一条)

  • 苹果7有分屏模式吗(iphone 7分屏)

    苹果7有分屏模式吗(iphone 7分屏)

  • 拼多多sku编码填什么(拼多多sku编码怎么填写填)

    拼多多sku编码填什么(拼多多sku编码怎么填写填)

  • mxf格式怎么打开(mxf格式怎么打开mac)

    mxf格式怎么打开(mxf格式怎么打开mac)

  • pc页面是什么意思(pc界面是什么意思)

    pc页面是什么意思(pc界面是什么意思)

  • 域名系统dns的含义是(域名dns的作用是什么)

    域名系统dns的含义是(域名dns的作用是什么)

  • oppo手机黑名单在哪个里面找(oppo手机黑名单怎么移出来)

    oppo手机黑名单在哪个里面找(oppo手机黑名单怎么移出来)

  • realmex2pro材质是塑料的吗(realme x2 pro什么牌子)

    realmex2pro材质是塑料的吗(realme x2 pro什么牌子)

  • 天猫店铺和淘宝店区别(天猫店铺和淘宝店铺的区别)

    天猫店铺和淘宝店区别(天猫店铺和淘宝店铺的区别)

  • iphone11怎么关后台

    iphone11怎么关后台

  • vivox21支持反向充电吗(vivox23反向充电怎么用)

    vivox21支持反向充电吗(vivox23反向充电怎么用)

  • 耳机插口坏了怎么办(耳机插口坏了怎么修复)

    耳机插口坏了怎么办(耳机插口坏了怎么修复)

  • mate20移动版有什么区别(mate20 移动)

    mate20移动版有什么区别(mate20 移动)

  • 苹果xsmax录屏在哪里(iphone xs max录频)

    苹果xsmax录屏在哪里(iphone xs max录频)

  • 怎样cad合并快捷键(cad2019合并快捷键)

    怎样cad合并快捷键(cad2019合并快捷键)

  • 小米手环4普通版和nfc版区别(小米手环4用处)

    小米手环4普通版和nfc版区别(小米手环4用处)

  • 电脑运行内存可以加吗(电脑运行内存可以扩大吗)

    电脑运行内存可以加吗(电脑运行内存可以扩大吗)

  • 鸿蒙系统怎么设置图片壁纸? 鸿蒙将相片设置为壁纸的技巧(鸿蒙系统怎么设置桌面小组件)

    鸿蒙系统怎么设置图片壁纸? 鸿蒙将相片设置为壁纸的技巧(鸿蒙系统怎么设置桌面小组件)

  • 【今日七夕】Love locker on a red stripe hanging in a temple in Chengdu, China © Philippe LEJEANVRE/Getty Images(今日七夕祝福语)

    【今日七夕】Love locker on a red stripe hanging in a temple in Chengdu, China © Philippe LEJEANVRE/Getty Images(今日七夕祝福语)

  • 湖南个税申报系统app
  • 新成立的公司如何建账
  • 企业购进固定资产时增值税如何处理
  • 进项发票已认证,发现发票有问题怎么办
  • 偶然所得税什么时候颁布
  • 关税的完税价格是什么意思
  • 多交增值税怎么算
  • 注册资本认缴到哪里
  • 记账王怎么查询凭证
  • 注册分公司独立核算和非独立核算的区别
  • 小规模超过10万是全额交税吗
  • 发票抬头写错了还能改吗
  • 小规模出租不动产免税吗
  • 回购股份限售
  • 房地产公司解散条件
  • 应交税费应交增值税的三级科目有哪些
  • 材料采购发生的合理损耗计入
  • 银行代扣水电费要手续费吗
  • 公司没有收入算正常经营吗
  • 职工伙食团食谱
  • 营改增后补缴营业税
  • 7月1日起,中药生产企业增值税税率为多少?
  • 设立独立核算的销售机构
  • 只有专票没有普票
  • 股权转让交的印花税怎么做会计分录
  • 公司没有进出口权 如何进行业务
  • 主营业务收入会计分录怎样写
  • 财务报表第一季度引用的期初数是第四季度还是年报
  • 盘亏的转销金额
  • 普通增值税发票跨越可以作废吗
  • 企业的债权资产
  • php开发用什么ide
  • php基础入门
  • PHP:stream_get_contents()的用法_Stream函数
  • 增值税进项如何取得更多
  • 技术人员工资属于什么费用
  • php url函数
  • 企业以付费的形式
  • 一文通透从输入URL到页面渲染的全过程----高频面试
  • 支付押金无法收取怎么办
  • 上年度固定资产少入账了怎么办?
  • 模型的内容
  • 公司购买家电开什么发票
  • 织梦的首页怎么换图片
  • mysql复制表语句
  • mysql的常用命令
  • mysql命令行实用程序
  • 收据大写后面的空格怎么填
  • 差额征税的账务处理教学视频
  • 负数发票作废后对原发票有影响吗
  • 房地产企业城建税和教育费附加怎么算
  • 发放职工薪酬的记账凭证
  • 出租写字楼写字楼
  • 装修费用摊销计入什么科目
  • 企业发放职工薪酬的账务处理
  • mysql数据库中SELECT * FROM是什么
  • windowsserver2003ftp服务器怎么搭建
  • windows2008 iis7如何取消目录执行权限的详细图文介绍
  • mac系统怎么样
  • linux安装rpm软件包的命令
  • freebsd ifconfig
  • xp系统盘空间不足怎么办
  • linux ili9341
  • win11怎么关闭系统防火墙
  • 将Red Hat 9.0 CD iso合成一张DVD iso的方法
  • win7 显示日期
  • pax是什么文件
  • 添加或删除程序在哪win10
  • win10系统样子
  • linux系统怎样
  • ext.formpanel
  • javascript对象的种类
  • android如何运行项目
  • python编程数字
  • jquery隐藏和显示div
  • sql怎么增删改
  • javascript静态
  • jquery.validate使用详解
  • 水电费收税
  • 越南进口废塑料新政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设