如果你在<el-menu-item>上绑定了点击事件,并希望阻止它的默认行为(如路由跳转),你可以使用Vue的事件修饰符.prevent来阻止。例如: vue <el-menu-item @click.prevent="handleClick">菜单项</el-menu-item> 这里的handleClick是你的点击事件处理函数,.prevent修饰符会阻止该元素上默认的...
<el-menu-item index="2-1"@click="show(2)":class="index===2? 'active':''">查找用户</el-menu-item> <el-menu-item index="2-2"@click="show(3)":class="index===3? 'active':''">新增用户</el-menu-item> <el-menu-item index="2-3"@click='show(4)':class="index===4? '...
</el-menu-item> </template> <script setup lang="ts"> interface Menu { name: string //菜单唯一标识,与路由名保持一致 chineseName: string //菜单显示名称 childMenu?: Menu[] | undefined //子菜单 } defineProps<{ menu: Menu }>() </script> 3 menu 组件 <template> <el-menu :default-act...
<template> <div class="header"> <div class="left"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect"> <el-menu-item index="/module1">模块 一</el-menu-item> <el-menu-item index="/module2">模...
2.菜单项,就是没有下一级了,点击可以跳转到具体页面。 整个菜单就是由这两种组件组成,我使用element-ui中的导航组件来实现: 菜单目录:el-submenu 菜单项:el-menu-item 而菜单目录中可以任意嵌套菜单目录和菜单项,el-submenu也是可以的。 注:vue3中用的是element-plus哦,如果对这个组件不熟悉建议先看一下文档哦...
2.菜单项,就是没有下一级了,点击可以跳转到具体页面。 整个菜单就是由这两种组件组成,我使用element-ui中的导航组件来实现: 菜单目录:el-submenu 菜单项:el-menu-item 而菜单目录中可以任意嵌套菜单目录和菜单项,el-submenu也是可以的。 注:vue3中用的是element-plus哦,如果对这个组件不熟悉建议先看一下文档哦...
el-menu 组件有个router属性,将其设置为 true 后,点击菜单项,vue 路由就会自动变成 el-menu-item 组件中 index 属性指向的内容,并且该菜单项也会高亮显示 如果点击浏览器的刷新按钮,el-menu 通常会不再高亮显示当前打开的路由页面。 当然,如果 el-menu 指定了default-active属性,则刷新页面后,无论实际路由是什...
│ SecondMenu-A-1 │┌────────────────────────┐ │ ├─────────────────────┤│ ThirdMenuItem2-A-1 x │ │ │ ThirdMenuItem1-A-1 ├─┘ └───────────────────────────────────┤ ...
│ SecondMenu-A-1 ││ ├─────────────────────┤│ │ ThirdMenuItem1-A-1 ││ ├─────────────────────┤│ │ ThirdMenuItem2-A-1 ││ ├─────────────────────┤ Main Content Area │ ...
在menu组件中,我们主要把一些不太常用的属性功能交给全局Store去配置,对于默认激活项这里采用useRouter获取当前路由的path,点击事件使用select事件,可以通过回调拿到menuItem的index,这里我们通过一个正则判断/http(s)?:/.test(key)判断是否是外链链接,如果是通过window.open跳转,如果不是通过router.push跳转就行了 ...