el-menu導航菜單的下拉折疊圖標

官網的折疊展開圖標

 

 

 

要實現的：

 

 思路：

1、首先替換折疊展開圖標

2、使用right復制，把圖標移動到需要展示的地方

  .el-submenu__title {
 
    .el-submenu__icon-arrow {
      right: 220px;
      margin-top: -5px;
    }

    .el-icon-arrow-down {
      right: 220px;
      margin-top: -5px;
    }

    .el-icon-arrow-down:before {
      content: '\e791';
    }
  }
}

3、菜單展開和關閉時的icon的旋轉

/*菜單關閉*/
.el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  -webkit-transform: rotateZ(0deg);
  -ms-transform: rotate(0deg);
  transform: rotateZ(0deg);
}
/*菜單展開*/
.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  -webkit-transform: rotateZ(90deg);
  -ms-transform: rotate(90deg);
  transform: rotateZ(90deg);
}