而如果不像看到滚动条,就要减去页面中上部分HTML元素的高度,就像我下面这个框架中的菜单一样 而只有减去上方HTML元素的高度,才会自适应,这里我设置了一个大概的高度height: 91.8vh;刚好没有滚动条。overflow-y: auto;自动开启滚动条。参考代码如下: .el-menu-vertical-trader{ background-color:#2f3c4d; height:9...
所以经过搜索,决定使用x-template类型的脚本文件作为模板载体进行二次封装,首先分析下navmenu的结构,最底层的无孩子节点的菜单使用el-menu-item标签标识,有孩子节点的菜单使用el-submenu标签进行嵌套,template标签显示该层级的菜单名称,所以我们需要对el-menu-item这个标签进行递归判断,上一波代码...
ElementPlus 的菜单组件(<el-menu>)是一个高度可定制的组件,用于构建网站的导航栏。它支持多级嵌套、水平或垂直布局、菜单项的选择与禁用等多种功能。以下是一些基本的使用方法: 基本结构:菜单项使用 <el-menu-item> 表示,嵌套菜单使用 <el-submenu> 包裹<el-menu-item-group> ...
aside里面套了el-menu样式为 .layout-aside { height: 100vh; overflow-x: hidden; transition: width 0.8s; -webkit-transition: width 0.8s; -moz-transition: width 0.8s; -webkit-transition: width 0.8s; -o-transition: width 0.8s; .el-menu { width: 100%; height: 100%; background-color: #...
.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(.el-menu-item:hover .icon), .menu-left:deep(.el-menu-item.is-active .icon) { ...
<template> <el-input v-model="inputValue" placeholder="请输入内容"></el-input> </template> <script> export default { data() { return { inputValue: '' }; } } </script> 路由组件(Router) 路由组件的使用示例 使用Element-Plus 的路由组件可以实现页面的导航和切换。 <template> <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...
-- 有子菜单 --><el-sub-menuv-if="subItem.children && subItem.children.length":index="subItem.path"><template#title><el-icon><component:is="subItem.meta.icon"></component></el-icon><span>{{ subItem.meta.title }}</span></template><SubMenu:menuList="subItem.children"/></el-sub-...
elementplus el-menu-item 鼠标pointer不精确 image.png 鼠标还没移上去就已经出现hover的样式 因此对其加上 overflow 就行 <stylelang="scss"scoped>.el-menu-item { height: 35px; overflow: hidden; } }