【vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换】的更多相关文章

vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换

elemen-ui官方网站:http://element.eleme.io/#/zh-CN/component/menu 新手小白利用vue+element-ui尝试搭建后台管理系统, 效果是这样的,但是发现点击首页时,黄色选中状态不会切换到首页, 最后发现可以利用$route.path设置默认选中的导航, 而且el-menu-item中的index  就是当前路由的路径, 代码重点如下图: 如此设置之后就可以实现导航和页面同时变化了.…

[vue ]滚动视图解决ElementUI NavMenu 导航菜单过长显示的问题

记录一下工作 需求 导航菜单过长的时候会溢出,需要一个像 Tabs 标签页一样的滚动视图容器,可以左右滚动内部视图. 解决方法 由于时间问题,所以直接将 Tabs 源码抽取出来使用. 这里要做一些特殊处理,不允许 NavMenu 导航菜单滚动视图容器内的元素换行. 如: /deep/.el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu {     float: none !important;     displ…

NavMenu 导航菜单

顶栏 适用广泛的基础用法. 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式.另外,在菜单中通过submenu组件可以生成二级菜单.Menu 还提供了background-color.text-color和active-text-color,分别用于设置菜单的背景色.菜单的文字颜色和当前激活菜单的文字颜色. <el-menu :default-active="activeIndex" class="el-menu-demo" mode=&q…

jq 实现切换菜单选中状态

点击导航菜单,切换选中状态 效果: 思路:首先获取选中的URL,再通过正则判断是否相同,相同就加上相应的属性,不相同就去除相应的属性. html代码 <div class="layui-container" style="padding: 0px; margin-top: 70px;"> <div class="layui-row footer-nav"> <div class="layui-col-xs2…

element-ui 框架中使用 NavMenu 导航菜单组件时，点击一个子菜单会出现多个子菜单同时展开或折叠？

我在使用 elment-ui 框架的导航组件时,直接粘贴复制了官网上 (http://element-ui.cn/#/zh-CN/component/menu)的例子不会出错,但是当我将他们转化为动态的时候,发现我点击其中的一个子菜单,其他的也会跟着展开或者折叠,如下: 呃~ 看看代码的确跟 index 有关,看了官网只知道它是一个唯一标识且默认值为空,殊不知还有这般影响,是我大意了,把 index 忽略没有设置,导致所有的都为空,也就失去了唯一的价值了,直接贴上我写对的代码吧: <templa…

Iview 中 获取 Menu 导航菜单 选中的值

期望效果: 原来,我用的是脚本来控制,然后........,再然后,我再去仔细看官方文档的时候,才发现,Menu组件 有那么两个事件,on-select 和 on-open-change ,好气啊,之前做了,那么多...............算了不吐槽了. 示例:…

2-5 【ngFor指令 事件的处理和样式绑定】顶部导航支持选中状态

索引的获取 first和last是布尔类型的 奇数偶数 []方括号表示的是数据绑定 ()圆括号就是事件绑定 . 开始代码 我们要实现的功能是菜单点击后,就变色 这样我们就得到了索引. 新建一个class的样式 什么时候用这个样式呢?当i等于(这个里双等于)选中的这个索引. 定义索引的变量.默认是等于-1表示啥都没选中. li标签点击事件触发改变索引的变量 放到函数里面 后端定义函数 点击当前按钮变红色 first 这个可以起任意的变量名 first的样式为绿色 第一个变绿色 even和 偶数变色…

导航菜单点击图片切换--jquery

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: b…

JQuery Mobile - 导航栏选中状态代码

class="ui-btn-active" 参考: https://wizardforcel.gitbooks.io/w3school-jqmobile/content/8.html…

微信小程序——选中状态的切换

加入购物车的时候,往往会有产品相关属性的选择,比如:尺寸,规格等.像我做的项目中,就有一个门店的选择,如下图: 我们如何做到当前点击的这个高亮呢?今天就讲一下如何实现这个功能. 思路: 1.定义一个高亮的样式,我就命名为active了: 2.获取你点击的这个id或者其他的唯一属性,我这里的唯一属性是campusId; 3.通过判断你点击的这个元素的campusId 是不是 等于 它自身的campusId,如果等于就添加active的样式. 相关代码: wxml: <view class='row…

elementUI的导航栏在刷新页面的时候选中状态消失的解决

首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { background-color: #00b4aa !important; } 在使用elementUI构建vue项目的时候会遇到页面刷新的时候子路由会保持原来的,页面中的内容也是当前对应路由的内容,但是elementUI的导航栏中的高亮显示的却失去了原来的状态,以下是我解决这个内容的方法,暂时没有发现什么…

Vue Router路由守卫妙用：异步获取数据成功后再进行路由跳转并传递数据，失败则不进行跳转

问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 需要注意的是,这里并没有单独的接口用于判断用户是否通过校验,而是若用户通过校验,接口就直接返回了用户需要的详情信息,未通过校验则不会返回详情信息并报错. 常见方案问题分析 (一)用户点击按钮后直接跳转到详情页面,在详情页面的created钩子函数中发起ajax请求获取数据 问题在于: 若用户未通过…

LayUI左侧菜单无法保持选中状态

1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模块连接只要点击就会刷新当前页面及左侧菜单,如果值刷新右侧内容也就不会出现这样的情况. 但是在左侧菜单作为模板页是必须要刷新的,例如在模块管理下添加一个模块,要立刻显示当前添加的模块. 如果引用iframe的方法只刷新右侧内容也不能解决当前的问题,况且iframe的性能并不是特别好.所以这里不建议采用…

vue Router——进阶篇

vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫 全局前置守卫 const router = new VueRouter({ ... }) router.beforeEach((to,…

Vue Router的简单了解

Vue Router Vue Router官方文档 传统Web项目开发往往采用超链接实现页面之间的切换和跳转.Vue开发的是单页面应用(Single Page Application,SPA),不能使用超链接<a>标记实现切换和跳转. 因为项目打包后(npm run build),就会产生dist文件夹,该文件夹中只有静态资源和一个index.html文件,所以使用<a>标记是不会生效的. 此时必须使用Vue Router进行管理.在Vue Router单页面应用中,路径之间的切换…

Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据

准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name: '', level: 0}, {id:2 , parentId: 0, name: '', level: 0}, {id:3 , parentId: 2, name: '', level: 1}, {id:4 , parentId: 2, name: '', level: 1}, {…

vue + element-ui 制作下拉菜单（可配置路由、可根据路由高亮list、可刷新自动展开定位路由）

本篇文章分享一篇关于 vue制作可路由切换组件.可刷新根据路由定位导航(自动展开).可根据路由高亮对应导航选项 一.实现的功能如下: 1.可折叠导航面板 2.点击导航路由不同组件              3.在当前页f5刷新,或者在url输入对应的路由地址,会根据路由打开左侧导航对应的位置并且展开.高亮 二.代码详情 1.main.js import Vue from 'vue' import App from './App' import router from './router' //引…

Element NavMenu动态生成导航菜单

为了演示方便,不从数据库获取了 {     "data":[         {             "id":125,             "authName":"用户管理",             "path":"users",             "children":[                 {                     …

vue+element UI递归方式实现多级导航菜单

介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI(安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹SideBar导入到现有项目中即可使用. 工作流程 组件封装好之后,由父组件调用该组件,父组件先向后端发送请求获取菜单数据,然后将菜单数据…

vue+element UI以组件递归方式实现多级导航菜单

介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI(安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹SideBar导入到现有项目中即可使用. 工作流程 组件封装好之后,由父组件调用该组件,父组件先向后端发送请求获取菜单数据,然后将菜单数据…

vue项目导航菜单实现

vue项目导航菜单问题 目标:横向菜单点击跳转,颜色变换,刷新可保持状态 // 模板template中通过循环菜单列表生成,动态类名改变颜色 <li v-for="(item, index) in navList" :key="index" v-text="item.name" :class="{ 'active-color': index === currentIndex }" @click="navigat…

前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI . Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本. Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 官网:http://element.ele…

vue+element-ui实现无限级动态菜单树

使用vue+element-ui实现无限级动态菜单 该案例实现主要使用递归的思想,递归对新人来容易迷惑的是自己调用自己,直到满足条件为止,接下来我们就一步一步实现一个动态多级菜单vue组件 搭建项目并安装element-ui npm i -g vue-cli vue init webpack myproject-name cd myproject-name/ npm install npm i element-ui -S 不是本文重点 自行查看element-ui官网 在main.js中引入el…

[Vue 牛刀小试]：第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传递.通过学习我们可以发现,在实现路由间的参数传递时,我们将 Vue Router 与我们的组件强耦合在一起,这无疑是不合适的,那么本章我们就来学习,如何实现组件和 Vue Router 之间的解耦. 学习系列目录地址:https://www.cnblogs.com/danvic712/p/95491…

Vue Router的导航解析过程

在我没读官方的vue router文档之前,我怎么也没想到路由的解析过程竟然有12步. 12步如下: 导航被触发. 在失活的组件里调用离开守卫beforeRouteLeave . 调用全局的 beforeEach 守卫. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). 在路由配置里调用 beforeEnter. 解析异步路由组件. 在被激活的组件里调用 beforeRouteEnter. 调用全局的 beforeResolve 守卫 (2.5+). 导航被确认. 调…

Vue Router 路由守卫：完整的导航解析流程

完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). 5 在路由配置里调用 beforeEnter. 6 解析异步路由组件. 7 在被激活的组件里调用 beforeRouteEnter. 8 调用全局的 beforeResolve 守卫 (2.5+). 9 导航被确认. 10 调用全局的 afterEach 钩子. 11 触发 DOM 更新. 12 用…

导航跳转后保持选中状态 jquery高亮当前选中菜单

功能需求:今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后,高亮当前菜单样式.简单的说,就是我点击导航菜单中的一个栏目,跳转到该栏目下,该栏目菜单也同时高亮(可以是背景色也可以是背景图片) 解决方法:通过查看实例,我们需要用到JS中的jquery来实现这种效果,也可以通过CSS设置不同页面的a:hover实现效果,不过这显然是比较笨拙的方法.那么,如何用JS来实现效果呢,实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用…

AntDesign vue学习笔记（五）导航菜单动态加载

一般的后台系统都有一个树形导航菜单,具体实现如下,主要参考https://my.oschina.net/u/4131669/blog/3048416 "menuList": [ { "name": "首页", "url": "http://192.168.1.100:9999", "iconType": "laptop", }, { "name":…

vue、element-ui 依权限动态导航 v-for、v-if

在管理后台需要按用户权限展示不同导航菜单时,我们需要从后端请求数据来进行菜单渲染. 但由于v-for与v-if不能在同一标签内使用(存在性能问题:v-for 具有比 v-if 更高的优先级,意味着 v-if 将分别重复运行于每个 v-for 循环中),所以我们需要将其分别放在不同标签内,v-for放在父级,v-if放在子级. 同时,由于使用实体实体标签作为v-for载体,将会影响el-menu的list结构,因此,我们将v-for放在template标签中. 代码如下(以三级菜单为例): htm…

Vue-cli项目与element导航菜单控件的结合使用以及遇到的问题

1.基本使用 第一种常用写法:导航菜单与 router-view 的配合使用 将所用的导航菜单数据编写成一个数组的形式,提高维护性: 在utils工具文件夹中建立utils.js文件: import merge from 'webpack-merge' /** * 工具类Class */ class testUtils { constructor() { } //当前默认语言 static currentLang = 'zh-CN' //支持国际化语言 static supportLangs =…