element-ui的菜单样式重构

最新推荐文章于 2024-01-11 19:46:35 发布

啥咕啦呛

最新推荐文章于 2024-01-11 19:46:35 发布

阅读量1.1k

点赞数 1

分类专栏： vue 技术栈文章标签：重构

本文链接：https://blog.csdn.net/happy921212/article/details/126710636

版权

vue 技术栈专栏收录该内容

14 篇文章 1 订阅

订阅专栏

element-ui的菜单样式重构，需要了解结构，再做定制。

ul.myMenuName .el-menu
  li.el-submenu
    div.el-submenu__title //-----------------1 级菜单
    ul.el-menu .el-menu--inline
      li.el-submenu
        div.el-submenu__titile //------------1-1级菜单
        ul.el-menu .el-menu--inline
          li.el-menu-item //-----------------1-1-1级菜单
      li.el-menu-item //---------------------1-2级菜单
  li.el-menu-item  //------------------------2 级菜单

  .el-menu-item // 没有子节点的叶子节点，不论几级
  .el-submenu__titile //有子节点的父级节点

想要做成下面的效果，就得了解结构，再做定制样式

<el-menu
      default-active="1-1-1"
      class="zk_menuShow">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>1 级菜单</span>
          </template>
          <el-submenu index="1-1">
            <template slot="title">1-1 级菜单</template>
            <el-menu-item index="1-1-1">1-1-1 级菜单</el-menu-item>
          </el-submenu>
          <el-menu-item index="1-2">1-2 级菜单</el-menu-item>
          <el-menu-item index="1-3">1-3 级菜单</el-menu-item>
          <el-menu-item index="1-4">1-4 级菜单</el-menu-item>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">2 级菜单</span>
        </el-menu-item>
      </el-menu>

//整体侧面
.el-menu{
  border-right: none;
}
//最终选中
.el-submenu .el-menu-item{
  &:hover {
    background: #EEF1F7!important;
    color:#284CC0!important;
  }
  &:active{
    background: #EEF1F7!important;
    color:#284CC0!important;
  }
  &.is-active{
    background: #284CC0!important;
    color:#EEF1F7!important;
  }
}
//一级菜单子叶子的选择
.el-menu-item{
  &:hover {
    background: #EEF1F7!important;
    color:#284CC0!important;
  }
  &:active{
    background: #EEF1F7!important;
    color:#284CC0!important;
  }
  &.is-active{
    background: #284CC0!important;
    color:#EEF1F7!important;
  }
}

//下拉内容 前面竖线
.el-menu--inline{
  position: relative;
  width: 90%;
  margin-left:10%;
  &:before{
    content:"";
    position: absolute;
    width: 2px;
    height: 100%;
    background: #eee;
    left:-10px;
    top:0;
  }
}
//所有带下拉的行
.el-submenu__title{
  width: 100%;
  height: 36px;
  line-height: 36px;
  margin-top: 8px;
  padding-left:1px!important;
  border-radius: 5px;
}
.el-menu--inline>.el-submenu>.el-submenu__title{
  padding-left:8px!important;
}
//最后选中的叶子菜单
.el-submenu .el-menu-item{
  min-width: 100px;
  width: 100%;
  height: 36px;
  line-height: 36px;
  margin-top: 8px;
  padding-left:8px!important;
  border-radius: 5px;
}
//一级子叶子
.el-menu-item{
  min-width: 100px;
  width: 100%;
  height: 36px;
  line-height: 36px;
  margin-top: 8px;
  padding-left:1px!important;
  border-radius: 5px;
}
//选择后显示
.zk_menuShow{
  margin: 0 10px;
  box-sizing: border-box;
  //选择子节点父节点样式
  .is-active {
    >.el-submenu__title {
      background: #EEF1F7!important;
      color:#284CC0!important;
      border-radius: 5px;
      i{
        color:#284CC0!important;
      }
    }
  }
}
//一级菜单字体加粗
.zk_menuShow>.el-submenu>.el-submenu__title{
  font-weight: bold;
}
//旋转图标变色
.el-submenu__title .el-submenu__icon-arrow{
  color:#284CC0!important;
}
//旋转
.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
  transform: rotateZ(270deg);
}
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
  transform: rotateZ(360deg);
}

以上作，为一次经验记录，下次有需要再做补充。

欢迎大家指正！~