export default { computed: { onRoutes() { const route = this.$route const { meta, path } = route // 在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中,来控制菜单自定义高亮显示 // meta中 有activeMenu 字段的子页面,都会显示高亮 if (meta.activeMenu) { return meta.activeMenu } ...
在element-plus官网,右侧有辅助当前页面滚动的导航栏,有如下能力: 随着当前页面滚动,右侧导航栏的当前高亮会动态进行切换,并且浏览器地址栏的锚点hash会跟随动态变化。 点击右侧导航栏,会将页面滚动到相应文档位置。 这个功能很实用,可惜官网并没有提供这个功能,这是提供了左侧配合路由进行页面级别跳转的el-menu。如下...
默认状态:展示菜单aaaa,和当前路由匹配,高亮显示。 需求 点击2切换路由参数,更新菜单里的url,并且菜单aaaa仍应高亮显示。 实现 菜单生成代码: <el-menuunique-opened:default-active="activeIndex"router><el-menu-itemv-for="item in menus":key="item.url":index="item.url">{{item.name}}</el-menu-item...
地址:https://gitee.com/YanaDH/vue3-element-template/tree/master 路径: src/layout/components/sidebar/menu 2 sub-menu 组件 <template> <el-sub-menu :index="menu.name" v-if="menu.childMenu"> <template #title> <el-icon><Menu /></el-icon> <span>{{ menu.chineseName }}</span> </tem...
配置路由:在路由主文件添加路由,路由位置在CommonAside的menu数组中保持偶一致。这里的name属性是小写,与上面不相同。 { path:'/mail', name:'mail', component:()=>import('../view/mail') }, { path:'/page1', name:'page1', component:()=>import('../view/other/pageOne.vue') ...
.el-sub-menu .el-sub-menu__title{font-size:14px;height:40px; }.el-sub-menu .el-sub-menu__title:hover{color:rgba(72, 118, 255, 1) !important;background-color:transparent !important;border-radius:8px; }.el-sub-menu .el-menu-item{font-size:14px;height:40px;&:hover { ...
│ SecondMenu-A-1 │ │ ├─────────────────────┤ │ │ ThirdMenuItem1-A-1 │ │ ├─────────────────────┤ │ │ ThirdMenuItem2-A-1 │ │ ├─────────────────────┤ Main Content Area │ ...
<el-menu-item style="margin: 0px"v-for="subItem in mainItem.children":key="subItem.id":index="subItem.routeName":permission="subItem.permission":title="subItem.routeName" > <router-link :to="{ name: subItem.routeName }"> <span>{{ subItem.name }}</span> ...
<el-menu//是否展开:collapse="!isCollapse"//是否只保持一个子菜单的展开。:unique-opened="false"//默认选中:default-active="activeMenu"//背景颜色:background-color="variables.menuBg"//文字颜色:text-color="variables.menuText"//文字高亮颜色:active-text-color="menuActiveTextColor"mode="vertical">/...
首次进入界面的执行过程为:route发生改变->watch监听->更改state->mapState监听->响应menu组件的default-active属性 What is Expected? 首次进入能够通过vuex高亮组件 What is actually happening? 不能高亮 element-botchanged the title[Bug Report] 关于vuex的mapState在首次进入界面时不能高亮element-plus的问题Dec ...