Vue + ElementUI 实现侧边菜单点击时加载一个动态菜单在横向位置

Easter79
• 阅读 1512

传统的左侧菜单的操作方式,在进行比对操作时并不是一个好的体验,下面讲到的实现是左侧菜单每次点击都会动态加载一个动态的横向菜单,而非仅左侧菜单一个入口

Vue + ElementUI 实现侧边菜单点击时加载一个动态菜单在横向位置

Vue + ElementUI 实现侧边菜单点击时加载一个动态菜单在横向位置

以下以Element UI组件库的菜单举例(虽然现在在切换到iview).

  1. 菜单在点击时的@select

  2. 在vuex中定义一个用于存放横向导航数据的数组

    1. 以下为vuex中的数据

      const state = { //导航 navigations: [] } const mutations = { set_navigations(state, data){ state.navigations = [...data] } } const actions = { async SET_NAVIGATIONS({commit}, data){ return commit('set_navigations',data) } } const getters = { navigations: state => state.navigations } // 此处省略挂载到store对象中的操作

    2. Sidebar中需要如下可计算变量

      computed: { navigations(){ return this.$store.getters.navigations } }

    3. 对组件中el-menu的@select进行回调

      <el-menu :router='true' :unique-opened='true' active-text-color='#ffd04b' background-color='transparent' :default-active='$route.path' text-color='#FFF' @select='selectMenu'>

    4. selectMenu回调函数处理逻辑,对vue入参的处理目的只是为了拿到菜单的名称,当然读者能用其它方法(如路由名称)能做到同样的事也行

      selectMenu(path,_,vue){ const navigations = this.navigations for (let navigation of navigations){ if (navigation.title === vue.$el.innerText){ return } } this.$store.dispatch('SET_NAVIGATIONS', [ ...navigations, {title: vue.$el.innerText, name: path} ]) }

    5. 以上实现了向vuex中添加点击到的菜单的path到vuex中,哪么下面就是将这些数据进行横向展示

      1. 实现了一个简单组件

      2. 使用上面定义的声明的组件

        <TabQueue @tab-remove="removeTab" @tab-click='handleClick'>

        computed: { navigations() { return this.$store.getters.navigations } }

        removeTab(path) { console.log(path) const navigations = this.navigations let index = -1; for (let i = 0; i < navigations.length; i++) { if (navigations[i].name === path) { index = i break } } if (index >= 0) { navigations.splice(index, 1) } this.$store.dispatch('SET_NAVIGATIONS', navigations) if (navigations.length === 0) { this.$router.push({path: '/dashboard'}) return } this.$router.push({path: navigations[navigations.length - 1].name}) }

        handleClick(object) { this.$router.push({path: object.name}) },

后记

上述代码逻辑足以实现图示中点击侧边栏菜单后自动加载到横向菜单的功能,可以使系统使用者更简单操作,虽然逻辑实现了菜单的切换性便捷,但未在此实现接切换路由再切回来时数据恢复的问题,如果没有保存离开路由时保存现场再到切回路由时恢复现场的能力,哪么这个功能也就少了一半的灵魂.

举个例子: 在A路由的页面填写了一半的数据,忽然发现有个数据是B页面上某个数据,于是切换便捷菜单找到了数据,但再切回来时发现之前填写的一半数据已经丢了,所以保存/恢复现场的功能与本章功能是相辅相成的,以后有时间再补这个功能吧

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
烽烟 烽烟
3年前
el-menu的default-active属性
项目elementplus官方描述当前激活菜单的index问题描述后台项目,左侧菜单如下用户管理用户列表商品管理商品列表商品分类订单管理订单列表数据统计统计信息菜单外层是<elmenu一级菜单用的是<elsubmenu二级菜单项用的是<elmenuitem<elmenurouterrouter属
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
C++ mfc
以下是我从其他网站中学的内容,后有相应的网站学习链接地址,可供学习1.选择菜单项FileNewProject,弹出“NewProject”对话框。2.左侧面板中InstalledTemplated的VisualC下选择MFC,中间窗口中选择MFCApplication,然后在下面的Name编辑框中键入工程名称,本例取名“Addi
Stella981 Stella981
3年前
Axure中怎么制作锚点
实现目标点击导航条不同的菜单,页面跳到菜单相应的位置,实现页面自动滚动。1. 拖入编辑区3个矩形,并相应命名为菜单1,菜单2,菜单3;!(https://oscimg.oschina.net/oscnet/06f0b4fbaf28e43de8bbf44d62d356f0f27.png)2. 再新建3个想要制作的文本框准备进行
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
vscode代码统计——Vscode counter
1.安装插件在vscode界面左侧,点击图中所示的菜单项,搜索Vscodecounter!(https://oscimg.oschina.net/oscnet/c5a34d49a226257509cd8f30b993cdf43ef.png)2.使用插件统计代码2.1.点击顶部View菜单
Wesley13 Wesley13
3年前
DOM元素的自动隐藏
在一些有悬浮元素的场景中,比如点击一个按钮弹出菜单后,点击菜单以外的地方,菜单应该被隐藏起来。隐藏的方式最好是自动隐藏,或至少是组件内的自动隐藏。蒙层比如,一个模态框组件(闭包实现)点击蒙层时,响应蒙层的点击事件,可以在事件处理函数中隐藏整个组件。在Vue和React等框架的组件中,这一点非常容易实现。<divclass"com
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k