如果不是router模式的话是没有用的,所以el-menu里面加了一个router。相当于帮我们封装了一层,帮我们跳转。 <el-icon>是vue的组件element,里面包了一层<component>,这是vue的能力,当时使用到哪个组件,那这里面is是一个动态值。 <el-icon> <component :is="menu.children[0].icon"> </comp
activeMenu: '1', // 默认选中的菜单项 submenus: [ // 子菜单数据 { id: '1',name: '子...
.menu-left:deep(.el-menu), .menu-left:deep(.el-sub-menu__title:hover) { background: none; } .menu-left:deep(.el-menu-item), .menu-left:deep(.el-sub-menu__title) { height:36px; margin-bottom:4px; border-radius:4px; color:var(--text-main-color)!important; } .menu-left:deep...
使用v-for 指令循环渲染 menuData 数组中的每个菜单项。 如果菜单项有子菜单(children 属性存在且长度大于 0),则使用 el-sub-menu 组件进行渲染,并通过 #title 插槽显示菜单标题。 如果菜单项没有子菜单,则使用 el-menu-item 组件进行渲染。 脚本部分: 使用ref 定义响应式数据 menuData,包含菜单项的数据结构。
<div class="menu-box-2"> <!-- 菜单: unique-opened = 是否只有菜单打开 default-active = 正在高亮的菜单id collapse = 是否折叠 参考文档:https://element.eleme.cn/#/zh-CN/component/menu --> <el-menu ref="el-menu" class="el-menu-style-1" ...
el-sub-menu:没有子菜单的菜单项(最末级); 结合菜单的属性和展示效果,可以得到每个菜单项包括:菜单名称、菜单图标、菜单唯一标识、子菜单列表四个属性。于是可得到菜单项结构定义如下: /** * 菜单项 */exportinterfaceMenuItem{/** * 菜单名称 */title:string;/** ...
</el-sub-menu> </template> </template> <script setup> import { pathArr } from '@/router/routes' import menuItem from './menuItem.vue' import { useRouter } from 'vue-router' import { useStore } from 'vuex'; //vue3 props的获取 ...
树枝:含有子菜单的菜单,使用 el-sub-menu 实现,不加载组件。 树叶:没有子菜单,使用 el-menu-item 实现,加载组件的菜单。 图标:使用 component 加载图标组件。 然后设置属性即可,这样一个n级菜单就搞定了。 封装一个动态tabs 菜单有了,下一步就是tabs,为了满足不同的需求,这里封装两个组件,一个单tab的,一个...
if(!ElMenuRef.value) return; let el = ElMenuRef.value.$el; let hasActiveSubEl = el.querySelector('.el-sub-menu .is-sub-defin-active'); if(!hasActiveSubEl) return; ElMenuRef.value.open(route.path); }); return { dataContainer, ...
<SubMenu v-for="child in menu.children" :menu="child" :key="child.path"></SubMenu> </el-sub-menu> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 代码实现 src/components/Menu/Menu.vue <script setup lang="ts"> // 导入子组件 SubMenu - 可下拉的菜单 ...