element默认箭头是上下。在网上搜了好久发现虽然能改掉箭头的样式,但是子菜单的箭头样式也会修改。
如图,这是我们要求显示的结果,但是其实实际实现的时候子菜单的箭头样式并没有改变。网上搜到的代码大都是这样
//菜单关闭
.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
-webkit-transform: rotateZ(-90deg);
-ms-transform: rotate(-90deg);
transform: rotateZ(-90deg);
}
//菜单展开
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
-webkit-transform: rotateZ(0deg);
-ms-transform: rotate(0deg);
transform: rotateZ(0deg);
}
或者这样,
/*菜单关闭*/
.el-submenu /deep/ .el-submenu__title .el-submenu__icon-arrow{
-webkit-transform: rotateZ(-90deg);
-ms-transform: rotate(-90deg);
transform: rotateZ(-90deg);
}
/*菜单展开*/
.el-submenu.is-opened /deep/ .el-submenu__title .el-submenu__icon-arrow{
-webkit-transform: rotateZ(0deg);
-ms-transform: rotate(0deg);
transform: rotateZ(0deg);
}
自己仔细研究了下,原来是选择器的问题,
改为,这样
.el-sub-menu :deep(.el-sub-menu__icon-arrow) {
transform: rotate(-90deg) !important;
}
/*菜单展开箭头样式*/
.el-sub-menu.is-opened> :deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
transform: rotate(0deg) !important;
}
解决。
烦死了下,其实归根结底,还是自己研究的不透彻,没有好好去看,就是一个小箭头的问题。