本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单。 本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plusel-menu组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单。
路由集成:结合Vue Router实现动态路由导航,根据路由状态动态更新菜单项的激活状态。 样式定制:通过覆盖Element Plus的默认样式或使用CSS变量来自定义菜单的外观和感觉。 element-plus导航栏相关资源或文档链接 Element Plus官方文档:Element Plus官方提供的el-menu组件详细文档,包含组件的基本用法、属性、插槽和事件等详细信息。
如果有子节点,先使用el-sub-menu渲染,el-sub-menu中的内容又继续调用renderMenu函数继续渲染。 整个组件实现如下infinite-menu.tsx: import{DefineComponent, defineComponent,PropType}from'vue'import*asElementPlusIconsVuefrom'@element-plus/icons-vue'import{ defaultMenuOptions,MenuItem,MenuOptions}from'./types'e...
</el-menu-item> <el-sub-menu index="/subMenuConfig"> <template #title> 选项设置 </template> <el-menu-item index="/department">部门设置</el-menu-item> <el-menu-item index="/system">系统设置</el-menu-item> <el-menu-item index="/warn">超时设置</el-menu-item> <el-menu-item in...
}.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 { color: rgba(72, 118, 255, 1);background-color:rgba(234, 239, 255, 1...
顶部栏菜单可以在各种场景中使用。导航菜单默认为垂直模式,通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外,在菜单中通过 sub-menu 组件可以生成二级菜单。 Menu 还提供了background-color、text-color和active-text-color,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。Proc...
Element plus官网[1]、vite构建vue3项目[2]、Vue3快速入门系列总目录[3] 一、使用vite新建项目和安装element plus $ npm create vite@latest $ npm install element-plus --save $ npm install @element-plus/icons-vue 二、Menu、面包屑、下拉菜单、Tab页示例 ...
菜单栏的渲染我们使用element plus中提供的Menu组件开发,其中el-menu中的el-sub-menu代表目录,el-menu-item则是能点击跳转的菜单。来看一下后端返回的菜单数据结构 image.png 由此可知,如果一条数据有children则说明它是目录,否则则是菜单,这样就好办了,我们可以判断每条数据有没有children有的话渲染el-sub-menu,没...
Menu 菜单 # 为网站提供导航功能的菜单。 顶栏# 顶部栏菜单可以在各种场景中使用。导航菜单默认为垂直模式,通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外,在菜单中通过 sub-menu 组件可以生成二级菜单。 Menu 还提供了background-color、text-color和active-text-color,分别用于设置菜单的...
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> </template> <!-- 多级嵌套菜单渲染 --> <sub-menu :menu="menuItem" v-for="menuItem in menu.childMenu" ...