当前位置: 首页 > news >正文

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

这个效果涉及到一个属性,就是default-active=""

当且仅当标签是el-menu-item的时候,index才会生效,也就是说二级标签才会生效,比如el-submenu就不能生效

 <el-aside style="width: 200px;min-height: 100vh;">
        <div
          style="height: 60px;width: 200px;display: flex;align-items: center;justify-content: center;background-color: #ccc;color: white;">
          logo
        </div>
        <el-menu style="border: none;" default-active="/">
          <el-menu-item index="/">
            <template slot="title">
              <i class="el-icon-house"></i><span>系统首页</span>
            </template>
          </el-menu-item>
          <el-menu-item>系统首页</el-menu-item>
          <el-menu-item>系统首页</el-menu-item>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-menu"></i><span>信息管理</span>
            </template>
            <el-menu-item>系统首页</el-menu-item>
            <el-menu-item>系统首页</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

当然此时我们还是死的,只能让第一个变成高亮,那变活如何处理呢!?所以就要用到绑定属性了

        <el-menu style="border: none;" :default-active="$route.path">

更改这样代码,加上 :default-active="$route.path",@route.path是当前浏览器正在访问的路由

我们现在可以进行高亮了,但是不能点击啊!怎么做到点击高亮呢?

在添加一个属性,router,这样就可以绑定路由了,也就能做到,点哪个路由就跳转到哪个路由了!

 <el-aside style="width: 200px;min-height: 100vh;">
        <div
          style="height: 60px;width: 200px;display: flex;align-items: center;justify-content: center;background-color: #ccc;color: white;">
          logo
        </div>
        <el-menu style="border: none;" router :default-active="$route.path">
          <el-menu-item index="/">
            <template slot="title">
              <i class="el-icon-house"></i><span>系统首页</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/element">element页面</el-menu-item>
          <el-menu-item>系统首页</el-menu-item>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-menu"></i><span>信息管理</span>
            </template>
            <el-menu-item>系统首页</el-menu-item>
            <el-menu-item>系统首页</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

我们在补充几个属性,

 <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">
          <el-menu-item index="/">
            <template slot="title">
              <i class="el-icon-house"></i><span>系统首页</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/element">element页面</el-menu-item>
          <el-menu-item>系统首页</el-menu-item>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-menu"></i><span>信息管理</span>
            </template>
            <el-menu-item>系统首页</el-menu-item>
            <el-menu-item>系统首页</el-menu-item>
          </el-submenu>
        </el-menu>

 text-color="rgba(255,255,255,0.65)":这个就是字体颜色

active-text-color="#fff"这个就是高亮之后的颜色

background-color="#001529"背景颜色

http://www.dtcms.com/a/54304.html

相关文章:

  • QTS单元测试框架
  • 多线程-CompletableFuture
  • 深度解析:视频软编码与硬编码的优劣对比
  • 【TCP/IP协议栈】【网络层】子网划分、子网掩码
  • 《从信息论视角:DataWorks平台下人工智能探寻最优数据编码的深度剖析》
  • 常见限流算法
  • Shell编程概述与Shell变量
  • 建筑兔零基础自学python记录39|实战词云可视化项目——章节分布10(上)
  • 【Flink银行反欺诈系统设计方案】4.Flink CEP 规则表刷新方式
  • Redis相关面试题
  • Mybatis集合嵌套查询,三级嵌套
  • JAVA与计算机网络基础
  • 生物信息学与计算生物学:各自概念、主要内容、区别与联系、发展展望?
  • 微服务的春天:基于Spring Boot的架构设计与实践
  • 如何把GUI做的像Web一样美观:Python PyQt6特性介绍,如何结合QSS美化
  • C++中`const` 和 `static` 关键字详解
  • 34.二叉树进阶3(C++STL 关联式容器,set/map的介绍与使用)
  • 【mysql系】mysql启动异常Can‘t create test file localhost.lower-test
  • 【大模型基础_毛玉仁】1.4 语言模型的采样方法
  • Excel中COUNTIF用法解析
  • 【笔记】记一次easyExcel中注解ExcelProperty映射字段赋值无效问题
  • dify 工作流 迭代
  • ArcGIS操作:15 计算点的经纬度,并添加到属性表
  • NDT 代价函数
  • 音视频入门基础:RTP专题(15)——FFmpeg源码中,获取RTP的视频信息的实现
  • K8S学习之基础十一:k8s中容器钩子
  • 日新F1、瑞研F600P 干线光纤熔接(熔接损耗最大0.03DB)
  • three学习记录
  • 秋云 ucharts echarts 高性能跨全端图表组件导入
  • P1443 马的遍历(BFS)