位置: 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微信支付)

  • 小米10至尊纪念版的重量是多少(小米10至尊纪念版摄像头)

    小米10至尊纪念版的重量是多少(小米10至尊纪念版摄像头)

  • 华为p30长截屏滚动不了是怎么回事(华为手机p30滚动截屏)

    华为p30长截屏滚动不了是怎么回事(华为手机p30滚动截屏)

  • 电脑无线服务使用不了怎么办(电脑无线连接服务不可用)

    电脑无线服务使用不了怎么办(电脑无线连接服务不可用)

  • 手机热是怎么回事(手机热怎么回事 vivo)

    手机热是怎么回事(手机热怎么回事 vivo)

  • 荣耀30怎么设置24小时制(荣耀30怎么设置2个系统)

    荣耀30怎么设置24小时制(荣耀30怎么设置2个系统)

  • 华为屏幕录制声音太小(华为屏幕录制声音来源怎么设置)

    华为屏幕录制声音太小(华为屏幕录制声音来源怎么设置)

  • 苹果xsmax死机了强制重启不了怎么办(苹果xsmax强制关机)

    苹果xsmax死机了强制重启不了怎么办(苹果xsmax强制关机)

  • 荣耀note10屏幕是三星的吗(荣耀note10屏幕好吗)

    荣耀note10屏幕是三星的吗(荣耀note10屏幕好吗)

  • 怎么设置没开通朋友圈(怎么设置没开通花呗功能)

    怎么设置没开通朋友圈(怎么设置没开通花呗功能)

  • 手机怎么连接路由器(手机怎么连接路由器2.4g网络)

    手机怎么连接路由器(手机怎么连接路由器2.4g网络)

  • 荣耀20s双卡怎么切换流量(荣耀20s双卡怎么安装)

    荣耀20s双卡怎么切换流量(荣耀20s双卡怎么安装)

  • 快手k币怎么兑换人民币(快手k币怎么兑换成现金)

    快手k币怎么兑换人民币(快手k币怎么兑换成现金)

  • mate30pro双卡怎么插(mate30pro双卡怎么看短信)

    mate30pro双卡怎么插(mate30pro双卡怎么看短信)

  • oppo拦截电话在哪设置(oppo手机拦截电话设置在哪里找到)

    oppo拦截电话在哪设置(oppo手机拦截电话设置在哪里找到)

  • 1g2g3g4g5g时代的具体含义(1g2g3g4g5g时代时间)

    1g2g3g4g5g时代的具体含义(1g2g3g4g5g时代时间)

  • 苹果手机号码拉黑了怎么恢复(苹果手机号码拉黑了,短信还可以收到吗)

    苹果手机号码拉黑了怎么恢复(苹果手机号码拉黑了,短信还可以收到吗)

  • qq扩列如何提高人气值(qq扩列分数怎么变高)

    qq扩列如何提高人气值(qq扩列分数怎么变高)

  • 百度视频如何旋转方向(百度视频如何旋转画面)

    百度视频如何旋转方向(百度视频如何旋转画面)

  • cz.exe进程是病毒木马吗 cz进程的危险程序分析(ccc.exe是什么进程)

    cz.exe进程是病毒木马吗 cz进程的危险程序分析(ccc.exe是什么进程)

  • 迪纳利国家公园里的白大角羊,阿拉斯加 (© Patrick J. Endres/Getty Images)(迪纳利国家公园在哪个国家)

    迪纳利国家公园里的白大角羊,阿拉斯加 (© Patrick J. Endres/Getty Images)(迪纳利国家公园在哪个国家)

  • python九宫格图片的原理(python简单九宫格拼图游戏)

    python九宫格图片的原理(python简单九宫格拼图游戏)

  • WordPress建立数据库连接时出错解决方法(wordpress建立数据库失败)

    WordPress建立数据库连接时出错解决方法(wordpress建立数据库失败)

  • 多缴纳社保怎么处理
  • 应付账款应收账款
  • 出票后定期付款的汇票是什么意思
  • 融资租赁确认的利息收入需要交增值税吗
  • 公对公退款要交税吗
  • 绿化养护合同免费
  • 某项目全部投资资金的40%由银行贷款
  • 公司筹建期间可以多久
  • 子公司分红母公司要不要交税
  • 税务逾期记录怎么消除不了
  • 员工向用人单位签加班协议书范本
  • 价外费用的判断标准
  • 个体户雇佣临时工
  • 外商投资企业是中国企业吗
  • 供用电合同主要有
  • 个税个人减免
  • 生产企业出口货物可享受免税并退税
  • 代扣代缴个人所得税
  • 未使用的固定资产提不提折旧
  • 咨询服务费要交税吗
  • 地税迁移期间能开发票吗
  • 价格调节基金税率和计税依据
  • 以前年度损益调整怎么用
  • 代收房租费
  • 销项税额抵减会取得专用发票吗为什么
  • 财务杠杆系数简单计算方法
  • 个人所得税由公司承担的账务处理
  • 增量留底税额怎么进行确定
  • 专家费1000元个人所得税到底是税前还是税后
  • 国外消费发票可以抵扣吗
  • 负债转为投资 资本增加吗
  • 电信服务通信服务费计入什么科目
  • 公司有物业管理部门吗
  • 经常访问的网站怎么恢复
  • Win10家庭版安装教程
  • unsupportedfirsthd解决办法
  • 企业党建活动经费管理办法的规定
  • windows太阳谷更新
  • 公司已开票给客户,但客户未打款怎么办?
  • 承包租赁
  • 企业盘盈资产开什么发票
  • 退回的税控盘费用如何做会计分类
  • 债权投资利息调整属于什么科目?
  • php curl_exec
  • 计提增值税附加税怎么计算
  • 100多年前程序员
  • thinkphp如何做微服务
  • 外埠存款通过哪个会计账户核算?
  • 错误日志怎么修复
  • 工会经费可以发购物卡吗
  • 帝国cms自动推送插件
  • 一般纳税人和小规模纳税人怎么界定
  • 电脑入账如何做凭证
  • 合伙企业分配利润法律依据
  • 个人所得税年度累计扣税规则
  • 零星采购入什么科目
  • 捆绑销售如何做税务处理合适?
  • 预付账款做错可以红冲之前的凭证重新做吗
  • 固定资产二级明细科目有哪些
  • 如何设置存货计价方法有哪些
  • sqlserver 表分区工具
  • win8系统连接网络
  • vc精华氧化变黄
  • win10电脑打开图片文件夹会跳闪
  • 用diskgenius硬盘格式转换怎么使用
  • win7系统安装程序正在启动一直转圈圈
  • 深入react技术栈
  • bootstrap基础教程
  • 简单好用的记账app
  • linux中fork()函数详解(原创!!实例讲解)
  • 百度地图给map添加
  • nodejs快速入门
  • javascript学习指南
  • 安卓手机管家
  • jquery中validate
  • js中写html代码
  • 什么叫银税互动
  • 严守纪律守规矩
  • 出口退税 即征即退属于政府补助吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设