一、问题描述 在使用el-dropdown实现二级菜单时,当点击二级菜单项时一级菜单列表会消失,这与需求相违背了!! 二、解决方案 利用dom操作来控制菜单列表的显示与隐藏(注:以下是利用vue3+element-plus+组合式API实现) html部分: <el-dropdowntrigger="click":hide-on-click="false"ref="operationDropdownMenuRef">...
顶部栏菜单可以在各种场景中使用。导航菜单默认为垂直模式,通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外,在菜单中通过 sub-menu 组件可以生成二级菜单。 Menu 还提供了background-color、text-color和active-text-color,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。Proc...
这里有一级也有二级菜单,注意二级菜单的父目录(”选项设置“点击不会跳转,只是展开目录),然后点击去详情页,需要跳到一个隐藏的路由,不在菜单展示的路由 还有一点要注意,就是这里有两个router-view,整个页面是一个router-view,可以由LoginView和HomeView替换(当前看到的页面),而HomeView下又有一个router-view,需要用...
.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 { color: r...
考虑到二级菜单打开页面是没有父页面组件的,不存在缓存问题,于是转换思路把3级页面在不影响菜单结构的情况下复制一份到一级菜单下成为二级菜单,并设置hidden:true隐藏。 然后三级菜单设置 redirect="复制的二级菜单的path" ,也就是点击该三级菜单会跳转到他重定向的二级页面下,这样就能正常使用缓存了 ...
利用组件el-popver组件,在组件内放入el-menu或者自己用a标签写加上样式。 注意:el-dropdown点击打开=>trigger="click",el-popver则使用鼠标滑过=>trigger="hover" 代码如下: <el-dropdownv-if="$store.state.user"trigger="click">{{$store.state.username}}<el-avatar:size="24":src="require('../ass...
我们先采用上面的这个布局,随后点开菜单这个选项: 找到第一个顶栏的位置,点开源代码: 这个源代码很长,我们按照需求截取片段: <template> 在这个里面通过修改不同参数也可以里面内容的样式。 3.4、侧边栏制作 我们先找到侧栏的模板,然后找到刚刚页面布局的Aside部分: <template> 觉得这个不好看没关系,后面我们会...
1. 菜单组件 Element Plus的菜单组件可以灵活地展示多级菜单,用户可以根据需要自定义菜单的样式与功能。 2. 面包屑组件 面包屑组件可以让用户清晰地知道当前所处的页面位置,方便用户进行导航。 3. 标签页组件 标签页组件可以让用户同时打开多个页面,并快速切换页面,提高用户的操作效率。 四、反馈组件 1. 对话框组件...
布局二:顶部菜单 + 侧面二级菜单 ┌────────────────────────────────────────────────────────────────────────────────┐ │ LOGO ┌───────┐ ┌───────┐ Avatar | Exit │ ...
在Vue3中,使用Element Plus可以方便地创建公共组件,比如左侧的菜单栏和右侧的头像区域。左侧菜单栏可以通过<el-menu>标签实现,而右侧的头像区域可以通过点击头像进行登出等操作。 在Element Plus中,可以支持二级菜单甚至三级或更多的菜单,通过使用<el-submenu>可以实现二级菜单的效果。 在实现过程中,可以使用Vue3的响应...