网站建设方案word,网站推广要具备什么,网站限定域名,网站模板免费下载云资源在使用 elementplus 的菜单组件时#xff0c;我发现有很多东西是官方没有提到但是需要注意的点 1. 菜单组件右侧会有一个边框 设置css
.el-menu {border: 0 !important;
} 2. 使用其他的 icon 文字内容一定要写在 这个 名字为 title 的插槽中
el-menu-itemv-forit…在使用 elementplus 的菜单组件时我发现有很多东西是官方没有提到但是需要注意的点 1. 菜单组件右侧会有一个边框 设置css
.el-menu {border: 0 !important;
} 2. 使用其他的 icon 文字内容一定要写在 这个 名字为 title 的插槽中
el-menu-itemv-foritem in navList:keyitem:indexitem.pathspanstylemargin-right: 20px; font-weight: bold:classitem.icon/span//这个地方我使用的是 阿里巴巴图标库里面的图表template #title{{ item.text }}//文字要在这里面/template/el-menu-item 3. 刷新不能回到对应的 活动样式失效 我这边使用的是 :class 加 设置 :default-active
先是在 el-menu-item 中指定了 选中时的样式
el-menu-item:class{subActive:getCurrentPath()item.path}//这行代码待会会解释v-foritem in navList:keyitem:indexitem.pathspanstylemargin-right: 20px; font-weight: bold:classitem.icon/spantemplate #title{{ item.text }}/template/el-menu-item 通过 getCurrentPath 这个函数获取到 当前的路径 并且 判断是否和当前的路径符合来控制样式是否显示。
我这边的 getCurrentPath 这个函数里面 是因为 前面前缀是一样的我只需要判断后面是否相等就行之所以会这样写 是因为很多时候 我们左侧的路由 因为右边的内容页再细分但是呢它是同属于一个大的路由的它们会有一个公共的前缀部分只需要保证公共前缀部分相等就行
const getCurrentPath () {let currentPath route.path.split(/);// console.log(currentPath);for (let i 0; i navList.length; i) {let path navList[i].path.split(/);if (flag 0) {if (path[2] currentPath[2]) {return navList[i].path;}}else{if (path[1] currentPath[3]) {return navList[i].path;}}}
};
一般情况应该是这样插一嘴route 指的是 这个
import { useRoute } from vue-router;const route useRoute();
const getCurrentPath () {for (let i 0; i navList.length; i) {if(navList[i].pathroute.path) return navlist[i].path//其实就是判断 菜单的路由是否对的上当前路径}
};
然后 在 el-menu 中 需要设置 router 模式也就是需要加上这个设置默认路由 是 getCurrentPath() 就好一定需要匹配的上 :index 里面的内容
el-menuclassel-menu-vertical-demo:collapseisCollapserouter:default-activegetCurrentPath()/el-menu 4. 修改高度等 element-plus 中很多样式都是设置了一个固定的值来设定css的一些参数当我们需要修改这些的时候我们发现使用 css 覆盖的效果微乎其微其实我们可以自己修改这些值
很多都可以去检查里面找到然后进行修改
:root {--el-menu-item-height: 80px;//这个是每个子菜单高度--el-menu-base-level-padding: 40px;//padding值--el-text-color-primary: #8a8989;//文字颜色
}
