用Vue写一个简单好看的菜单组件（Vue实战系列）

一、需求

实现一个左边栏菜单，菜单只包括两层；
点击出现水波纹效果；
激活效果：有一个绿球小点，标识激活的菜单，顶层菜单被激活时左边出现浅色激活标志；

二、实现

新建一个菜单组件whrmenu

 props: {//菜单数据必输是数组 包含 url title icon childrenmenu: {type: Array,required: true,},//父级激活左边阴影颜色pletcolor: {type: String,default: "#856ab5",},//小球颜色pointcolor: {type: String,default: "#1ab3a3",},},

这个菜单长这个样子：

 menu: [{title: "题库管理",url: "/index/questionlist",icon: "el-icon-files",children: [{title: "题库列表",url: "/index/question/questionlist",},],},{title: "活动管理",url: "/index/activity",icon: "el-icon-help",children: [{title: "活动列表",url: "/index/activity/activitylist",},],},{title: "系统设置",url: "/index/sys",icon: "el-icon-setting",children: [{title: "用户管理",url: "/index/sys/user",},],},],

拿到这个菜单，我们需要处理一下，如果menu有子菜单，那么就给加一个isexpand的属性，方便之后的做展开操作。

用一个计算属性修改一下menu

每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。
如果你这样做了，Vue 会在浏览器的控制台中发出警告。
这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

 menus(){let menus = this.menu.map(item=>{if(item.children){item.isexpand = false;}return item})return menus}

放一下模版代码

<div class="whr-menu"><divv-for="(item,index) in menus":key="index"><divv-rippleclass="whr-pmenu-item":class="{activeMenu:activeItem == item.url}"@click="clickitem(item,index)"><div style="display:flex;"><div style="width:30px"><i:class="item.icon"style="margin-right:20px"></i></div><div>{{ item.title }}</div><divclass="xiaoqiu"v-show="!item.isexpand && pgreen == item.url":style="{ backgroundColor: pointcolor }"></div></div></div><divv-if="item.children"class="childrendiv":class="{havechildren:item.isexpand}"><divv-rippleclass="whr-sbmenu-item":class="{activesbMenu:activesbItem == sb_item.url}"@click="clicksbitem(sb_item,item)"v-for="(sb_item,sb_index) in item.children":key="sb_index">{{ sb_item.title }}<divclass="xiaoqiu"v-show="$route.path == sb_item.url":style="{ backgroundColor: pointcolor }"></div></div></div></div></div>

菜单的点击事件

 clickitem(item,index) {this.menus[index].isexpand = !item.isexpand;this.activeItem = item.url;if (item.children) {//有子菜单，设置子元素高度this.activeLength = item.children.length * 49 + 20 + "px";}this.$emit("dianp", item);console.log("当前激活父级菜单", this.activeItem);},clicksbitem(item, pitem) {//点击子菜单this.activesbItem = item.url;this.activeItem = pitem.url;this.$emit("dianc", {item, pitem});},

点击父级菜单和点击子菜单的逻辑我先写的不一样，以后可以简化再改，主要记录一下当前菜单的url；
父级菜单的这个小绿点有些麻烦，当激活的菜单是这个父级菜单的子菜单而且这个父级菜单没有展开的时候才加这个小绿点。

做一个计算属性，看看当前激活的菜单在不在这个父级菜单里面，返回这个绿点应该在的位置：

//父级菜单绿点位置pgreen() {let u = [];u = this.menus.filter(item=>{let xu = []if(item.children.length>0){xu = item.children.filter(i=>{return i.url == this.$route.path})if(xu.length>0){return true} else {return false}}else {return item.url == this.$route.path}})return u[0].url},

喜欢的小伙伴留言点赞关注吧！

用Vue写一个简单好看的菜单组件（Vue实战系列）相关推荐

写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
一个html写的app首页,如何快速开发一个简单好看的APP控制页面
原标题:如何快速开发一个简单好看的APP控制页面导读机智云开源框架为了让开发者快速开发APP,已将用户登录,设备发现,设备配网等功能做成了各个标准模块,仅保留控制页面让开发者自行开发设计,节省了开 ...
linux下Qt编写串口调试助手,如何在linux下用QT写一个简单的串口调试助手
如何在linux下用QT写一个简单的串口调试助手 QT5串口类在QT5以前,编写串口一般使用的是qextserialport类,但在QT5之后有了QT自带的串口类SerialPort(串口基础类)和 ...
分享一个简单好看的科技公司官网模板-纯HTML+CSS
分享一个简单好看的科技公司官网模板-纯HTML+CSS 首页: 首页的HTML源码部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
写一个简单的Java界面程序
写一个简单的Java界面程序有时候未免想写一些有界面的java小程序练练手,那么如何写一个比较好看的界面话程序呢?下面小编就带你一步一步来搭建这个小洋房. 实现界面化编程要用到的一个主要包impor ...
Java语言写一个简单的学生信息管理系统，通过JDBC连接数据库对学生信息进行增删改查，采用三层思想和DBUtils第三方框架。
我把源代码和sql文件放GitHub上了,你们可以自行下载:https://github.com/fenglily1/student. 有问题可以留言或私信,我看到就会回. 进阶版加上页面的管理系统在 ...
用Qt写一个简单的音乐播放器（七）：界面美化（QSS样式表）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
DuiVision开发教程(2)-如何写一个简单的界面程序
基于DuiVision界面库开发的界面程序主要包括如下几部分内容: 1.资源定义,包括图片资源.各个窗口界面的xml定义文件 2.事件处理类代码,用于处理界面响应消息 3.其他业务逻辑代码下面举例说 ...
用java做一个简单记事本_用记事本写一个简单的java程序
用记事本写一个简单的java程序第一步: 安装好jdk,并设置好环境变量. 桌面-计算机(右键)-属性-高级系统设置-环境变量-path-在变量值后加上:和jdk安装路径加上(路径即为C:\Prog ...

用Vue写一个简单好看的菜单组件（Vue实战系列）

一、需求

二、实现

用Vue写一个简单好看的菜单组件（Vue实战系列）相关推荐

最新文章

热门文章