vue2 element2 自定义 NavMenu 导航菜单 的样式

HTML 代码

<el-menu default-active="2"
               class="el-menu-vertical-demo"
               @open="handleOpen"
               @close="handleClose"
               background-color="#fff"
               active-text-color="#e9e9e9">
        <p>任务管理</p>
        <el-menu-item index="1">
          <span>任务列表</span>
        </el-menu-item>
        <el-menu-item index="2">
          <span>任务标签</span>
        </el-menu-item>
      </el-menu>

CSS 样式

::v-deep .el-menu {
  height: 100vh;
}

//设置选中el-menu-item时的样式
::v-deep .el-menu-item.is-active {
  background-color: #f5f5f5 !important;
  color: #0079fe !important;
}

// 设置鼠标悬停的样式
::v-deep .el-menu-item:hover {
  background-color: #f5f5f5 !important;
  color: #0079fe;
}
::v-deep .el-menu-item:hover i {
  color: #0079fe;
}

效果