vue左侧边框点击后让字体高亮

这个效果涉及到一个属性，就是default-active=""
当且仅当标签是el-menu-item的时候，index才会生效，也就是说二级标签才会生效，比如el-submenu就不能生效

1. <el-aside style="width: 200px;min-height: 100vh;">
2.         <div
3.           style="height: 60px;width: 200px;display: flex;align-items: center;justify-content: center;background-color: #ccc;color: white;">
4.           logo
5.         </div>
6.         <el-menu style="border: none;" default-active="/">
7.           <el-menu-item index="/">
8.             <template slot="title">
9.               <i class="el-icon-house"></i><span>系统首页</span>
10.             </template>
11.           </el-menu-item>
12.           <el-menu-item>系统首页</el-menu-item>
13.           <el-menu-item>系统首页</el-menu-item>
14.           <el-submenu>
15.             <template slot="title">
16.               <i class="el-icon-menu"></i><span>信息管理</span>
17.             </template>
18.             <el-menu-item>系统首页</el-menu-item>
19.             <el-menu-item>系统首页</el-menu-item>
20.           </el-submenu>
21.         </el-menu>
22.       </el-aside>

复制代码

固然此时我们还是死的，只能让第一个变成高亮，那变活如何处理呢！？以是就要用到绑定属性了
        <el-menu style="border: none;" :default-active="$route.path">
更改如许代码，加上 :default-active="$route.path"，@route.path是当前浏览器正在访问的路由
我们现在可以进行高亮了，但是不能点击啊！怎么做到点击高亮呢？
在添加一个属性，router，如许就可以绑定路由了，也就能做到，点哪个路由就跳转到哪个路由了！

1. <el-aside style="width: 200px;min-height: 100vh;">
2.         <div
3.           style="height: 60px;width: 200px;display: flex;align-items: center;justify-content: center;background-color: #ccc;color: white;">
4.           logo
5.         </div>
6.         <el-menu style="border: none;" router :default-active="$route.path">
7.           <el-menu-item index="/">
8.             <template slot="title">
9.               <i class="el-icon-house"></i><span>系统首页</span>
10.             </template>
11.           </el-menu-item>
12.           <el-menu-item index="/element">element页面</el-menu-item>
13.           <el-menu-item>系统首页</el-menu-item>
14.           <el-submenu>
15.             <template slot="title">
16.               <i class="el-icon-menu"></i><span>信息管理</span>
17.             </template>
18.             <el-menu-item>系统首页</el-menu-item>
19.             <el-menu-item>系统首页</el-menu-item>
20.           </el-submenu>
21.         </el-menu>
22.       </el-aside>

复制代码

我们在补充几个属性，

1. <el-menu text-color="rgba(255,255,255,0.65)" active-text-color="#fff" background-color="#001529" style="border: none;"router :default-active="$route.path">
2.           <el-menu-item index="/">
3.             <template slot="title">
4.               <i class="el-icon-house"></i><span>系统首页</span>
5.             </template>
6.           </el-menu-item>
7.           <el-menu-item index="/element">element页面</el-menu-item>
8.           <el-menu-item>系统首页</el-menu-item>
9.           <el-submenu>
10.             <template slot="title">
11.               <i class="el-icon-menu"></i><span>信息管理</span>
12.             </template>
13.             <el-menu-item>系统首页</el-menu-item>
14.             <el-menu-item>系统首页</el-menu-item>
15.           </el-submenu>
16.         </el-menu>

复制代码

 text-color="rgba(255,255,255,0.65)"：这个就是字体颜色
active-text-color="#fff"这个就是高亮之后的颜色
background-color="#001529"背景颜色

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。